mini-training: typescript
DESCRIPTION
TypeScript is a language for application-scale JavaScript development. TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open Source.TRANSCRIPT
![Page 1: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/1.jpg)
01/2014
![Page 2: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/2.jpg)
Agenda
What is TypeScript.
Language Features.
Integration in Environnement.
Future.
2
![Page 3: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/3.jpg)
What is TypeScript
Why create TypeScript
CoffeScript, Dart, TypeScript…
Transcripting.
3
![Page 4: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/4.jpg)
What is TypeScript/Why create TypeScript
• TypeScript is just a tool to be used at coding-timeto improve the quality of your JavaScript
• TypeScript is designed for development of largeapplications and compiles down to JavaScript
• Adds optional static typing and class-basedPOO to the language
4
![Page 5: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/5.jpg)
What is TypeScript/CoffeScript, Dart, TypeScript
• CoffeeScript – a fresh coat of paint
• Dart – a fresh look at the web
• TypeScript – the JavaScript of tomorrow
5
![Page 6: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/6.jpg)
What is TypeScript/Transcripting
• In reality is not a compilation but a transcripting
6
![Page 7: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/7.jpg)
Language Features
Primitive Type
Grammar
Generics
Poo
Parametres
Exception
Include / Reference
7
![Page 8: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/8.jpg)
Language Features / Primitive Type
• Number
• Boolean
• String
• Void
• Null
• Undefined
• Enum
• String Literal8
![Page 9: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/9.jpg)
Language Features / Grammar
9
![Page 10: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/10.jpg)
Language Features / Grammar
10
var myString = 'A String'; var myNumber = 1; var myBoolean = true;
var myString: string = 'A String'; var myNumber: number = 1; var myBoolean: boolean = true;
![Page 11: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/11.jpg)
Language Features / Grammar
11
var example = { name: 'Example', id: 5, collection: ['a', 'b', 'c'] }
![Page 12: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/12.jpg)
Language Features / Grammar
12
var example: { name: string; id: number; collection: string[]; } = { name: 'Example', id: 5, collection: ['a', 'b', 'c'] }
![Page 13: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/13.jpg)
POO / Items
Classes
Interfaces
Function
Modules
Generic
13
![Page 14: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/14.jpg)
Classes
14
class Car { // Property (public by default) engine: string; // Constructor // (accepts a value so you can // initialize engine) constructor(engine: string) { this.engine = engine; } }
![Page 15: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/15.jpg)
Interface
15
interface ICar { engine: string; color: string; } class Car implements ICar { constructor(
public engine: string, public color: string) {
} }
![Page 16: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/16.jpg)
Function
16
class Car { engine: string; constructor(engine: string) { this.engine = engine; } start() { return "Started " + this.engine; } }
![Page 17: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/17.jpg)
class G<T> { // parameter T self: G<T>; // T type argument f() { // Both of type G<T> this.self = this; } }
Generics
17
![Page 18: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/18.jpg)
Module
18
module Shapes { export class Rectangle { constructor( public height: number, public width: number) { } } } // This works! var rect = Shapes.Rectangle(10, 4);
![Page 19: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/19.jpg)
Module
19
// bootstrapper.ts file // imports the greeter.ts file as the greeter module import gt = module('greeter'); export function run() { var el = document.getElementById('content'); var greeter = new gt.Greeter(el); greeter.start(); }
![Page 20: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/20.jpg)
POO / Keyword
• Public
• Private
• Interface
• Class
• Implements
• Module
20
![Page 21: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/21.jpg)
function func(shape: Square): number; function func(shape: Ellipse): number; function func(shape: Triangle): number; function func(shape: Shape): number { if (shape instanceof Square) { // Do something } // ... throw new TypeError("Unsupported type!"); }
POO/ Function overload
21
![Page 22: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/22.jpg)
print(char: string = '0') { } print4(index: number = this.length): number { } print2(char?: string) { } print3(...num: number[]) { }
Language Features / Parameter
22
![Page 23: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/23.jpg)
Language Features / Exception
• TypeScript using the throw keyword. In JavaScript you can follow the throw statement with any type, although typically strings are used to supply an error message. In TypeScriptit is more usual to throw an “Error” object.
• Only on catch for multiple object Exception
23
![Page 24: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/24.jpg)
/// <reference path="SimplSocket.ts" /> module MyWebApp.BusinessLogic { class ComplexWebSocket extends MyWebApp.BusinessLogic.SimplSocket { } }
Language Features / References
24
![Page 25: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/25.jpg)
Integration in Environnement
Editor
Web Essentials
25
![Page 26: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/26.jpg)
Environnement / Editor
• Visual studio, WebStorm with IntelliSense and Debug.
• Sublime Text 2, Vim and eMacs, but it does not include the TLS, so there is no IntelliSense
26
![Page 27: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/27.jpg)
Environnement / Web Essentials
• Produce a minified version of the generated JavaScript file.
• Will automatically produce source map (.js.map) files for debugging purposes as soon as the .ts file is saved.
• …
27
![Page 28: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/28.jpg)
Future
• 0.9.5
– Focus on user-report issues, Improve reliability, Improve CPU- and memory-usage
• 1.0RC
– Finish stability work, Finish conformance with 1.0 spec
• 1.0
– Begin backward-compatibility
28
![Page 29: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/29.jpg)
Future
• 1.x
– Async/Await
– Mixins
– Protected access
– More ECMAScript 6 language features
– ECMAScript 6 modules syntax
– ES6-compatible codegen
29
![Page 30: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/30.jpg)
Questions?
30
![Page 31: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/31.jpg)
http://www.typescriptlang.org/
http://typescript.io/
http://en.wikipedia.org/wiki/TypeScript
http://www.dotnetcurry.com/showarticle.aspx?ID=939
http://www.johnpapa.net/typescriptpost2/
http://www.codeproject.com/Articles/469280/An-introduction-to-Type-Script
http://codeforhire.com/2013/06/18/coffeescript-vs-typescript-vs-dart/
31
Some links…
![Page 32: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/32.jpg)
Some books…
32
![Page 34: Mini-Training: TypeScript](https://reader034.vdocuments.site/reader034/viewer/2022052321/554f8823b4c9052a518b4fdc/html5/thumbnails/34.jpg)
About Betclic• Betclic Everest Group, one of the world leaders in online gaming, has a unique portfolio
comprising various complementary international brands: Betclic, Everest Gaming, bet-at-home.com, Expekt…
• Active in 100 countries with more than 12 million customers worldwide, the Group is committed to promoting secure and responsible gaming and is a member of several international professional associations including the EGBA (European Gaming and Betting Association) and the ESSA (European Sports Security Association).
• Through our brands, Betclic Everest Group places expertise, technological know-how and security at the heart of our strategy to deliver an on-line gaming offer attuned to the passion of our players.