Typescript

PRÉSENTATION

IDE


Typescript et Javascript



support ES6




PREMIER Exemple



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

var c = compute(4,2);


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;

interface 2/2



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

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

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 {...}

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

DECORATOR


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

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

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
}

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
}

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

VS


GWT
Dart
CoffeeScript

Traceur
JSTransform

RESSOURCES






Copy of Typescript

By social4hyq

Source: Jonathan Gourdin

Copy of Typescript

  • 1,043

More from social4hyq