Typescript

jonathan.gourdin@orange.com

PRÉSENTATION

V1.6
Microsoft
Anders Hejlsberg (Turbo Pascal, Delphi, C#)
Open source
EcmaScript 6
typescriptlang.org

installer npm install -g typescript
compiler tsc helloworld.ts

Utilisation

IDE

Visual Studio, Visual Studio Express pour le Web , et Visual Studio Code
Eclipse avec TypEcs
Webstorm
Sublime Text avec TSP
...

Typescript et Javascript

support ES6

PREMIER Exemple

function compute(a, b) {
    return a * b;
}

var c = compute(4,2);

play

Type 1/4

déclaration

var a:string = "hello";

inférence de type

var a = "hello"

types primitifs et type inconnu

number, boolean, string, any

objet

var o:Object = new Object()

Type 2/4

type de retour

function(t:Type):void

argument par défaut ou optionnel

function(default = "default", optional?:Type)

nombre indéfini d'arguments

function(...args:Type[])

type fonction

var callback: (arg1:Type1, arg2:Type2) => Type3;

type 3/4

tableau

var t:string[] = [];
var t:Array<string> = new Array<string>()

map

var m:{ [key:string]:Type; } = {}

type d'une autre instance

var a:typeof b;

cast

var a = <Type> b;

Type 4/4

typage optionnel
IDE friendly (et aussi dev)

autocompletion
vérification des erreurs

syntaxe
type

refactoring
navigation dans le code

interface 1/2

déclaration et héritage

interface MyInterface extends OtherInterface {...}

propriétés et méthodes optionnelles

property:string;
optionalProperty?:Type;
optionalMethod?(value:boolean):string;

une objet peut être aussi une fonction

():number;

play

interface 2/2

déclaration inline
duck typing

var p:{x:number; y:number} = {x: 5, y: 12, z: 6};

play

Classe 1/2

ES6

déclaration, héritage et implémentation

class MyClass extends OtherClass implements MyInterface {...}
abstract class MyAbstractClass {...}

constructeur

constructor(public publicProperty:string, value = 3) {
    super();
    this._privateProperty = value;
}

Classe 2/2

propriétés/méthodes publiques et privées

private _privateProperty:number;
protected protectedProperty:string;

public method(value:string) {
    return super.method(value) + this.publicProperty;
}

publicProperty = "toto";

accesseurs

get privateProperty() {
    return this._privateProperty;
}

play

Module

ES6
IIFE Immediately-Invoked Function Expression
namespace/package
singleton
compatible AMD, commonjs

Module 2/2

nommé généralement en minuscule

module mymodule {}

encapsulation interface, classe, variable, fonction et module

var privateVar = 12;
function privateFunction() {...}
class MyClass{};

export pour rendre accéssible


export var publicVar = privateFunction();
export function publicFunction() {
    return privateVar;
}
export interface MyInterface {...}

play

Module Externe

import * as Math from "my/math";
import { add, subtract } from "my/math";

Arrow function

ES6
Sucre syntaxique
préserve this
utile pour les handlers et callbacks

(value1:string, value2:string) => {
	return this.value + value1 + value2;
}

play

DECORATOR

AtScript

ES7

Classe, méthode, propriété et attribut de fonction

class C {
    @log
    foo(n: number) {
        return n * 2;
    }
}

Play

Exemple

Surcharge de méthode

déclaratif

suite de signature avant le corps de la fonction
la distinction se fait manuellement

par constante

ex: addEventListener et document.createElement

interface Document {
    createElement(tagName: string): HTMLElement;
    createElement(tagName: 'div'): HTMLDivElement;
    createElement(tagName: 'span'): HTMLSpanElement;
    // + 100 more
}

play

Générique

<T>(items:T[], callback:(item:T) => T):T[]

interface Pair<T1, T2> {
  first:T1;
  second:T2;
}

<T extends ConstrainedType>():T

var t = new Array<number>();

Enum

enum Options {
  FIRST,
  EXPLICIT = 2,
  BOOLEAN = Options.FIRST | Options.EXPLICIT
}

play

Compilation

tsc [options] [file ..]

un seul fichier --out

AMD CommonJS UMD System --module

ES3 ES5 ES6 --target

sourcemap --sourcemap

Library - reference

référence fichier du projet

/// <reference path="myFile.ts" />

Fichier de déclaration d.ts

API javascript et DOM (lib.d.ts)
nodejs
Bibliothèques externes

definitely typed
/// <reference path="lib/jquery.d.ts" />

VS

GWT

Dart

CoffeeScript

Traceur

JSTransform

RESSOURCES