mini-training: typescript

01/2014

Agenda

What is TypeScript.

Language Features.

Integration in Environnement.

Future.

2

What is TypeScript

Why create TypeScript

CoffeScript, Dart, TypeScript…

Transcripting.

3

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

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

What is TypeScript/Transcripting

• In reality is not a compilation but a transcripting

6

Language Features

Primitive Type

Grammar

Generics

Poo

Parametres

Exception

Include / Reference

7

Language Features / Primitive Type

• Number

• Boolean

• String

• Void

• Null

• Undefined

• Enum

• String Literal8

Language Features / Grammar

9

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;

Language Features / Grammar

11

var example = { name: 'Example', id: 5, collection: ['a', 'b', 'c'] }

Language Features / Grammar

12

var example: { name: string; id: number; collection: string[]; } = { name: 'Example', id: 5, collection: ['a', 'b', 'c'] }

POO / Items

Classes

Interfaces

Function

Modules

Generic

13

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; } }

Interface

15

interface ICar { engine: string; color: string; } class Car implements ICar { constructor(

public engine: string, public color: string) {

} }

Function

16

class Car { engine: string; constructor(engine: string) { this.engine = engine; } start() { return "Started " + this.engine; } }

class G<T> { // parameter T self: G<T>; // T type argument f() { // Both of type G<T> this.self = this; } }

Generics

17

Module

18

module Shapes { export class Rectangle { constructor( public height: number, public width: number) { } } } // This works! var rect = Shapes.Rectangle(10, 4);

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(); }

POO / Keyword

• Public

• Private

• Interface

• Class

• Implements

• Module

20

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

print(char: string = '0') { } print4(index: number = this.length): number { } print2(char?: string) { } print3(...num: number[]) { }

Language Features / Parameter

22

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

/// <reference path="SimplSocket.ts" /> module MyWebApp.BusinessLogic { class ComplexWebSocket extends MyWebApp.BusinessLogic.SimplSocket { } }

Language Features / References

24

Integration in Environnement

Editor

Web Essentials

25

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

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

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

Future

• 1.x

– Async/Await

– Mixins

– Protected access

– More ECMAScript 6 language features

– ECMAScript 6 modules syntax

– ES6-compatible codegen

29

Questions?

30

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…

Some books…

32

Find out more

• On https://techblog.betclicgroup.com/

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.