Un survol

Ça ressemble à du javascript

Avec du typage

Et des classes

Et des trucs en plus

Jusqu'à ne plus beaucoup ressembler à du javascript

Pros & Cons

Bénéfices

• Typage fort (vérifications du compilateur, completion, refactoring)
• Fonctionnalités ES6 transpilées vers ES3/ES5
• Open-source, évolution ouverte, roadmap, traction
• Une spécification à jour

Inconvénients

• Étape de compilation supplémentaire
• Support de ES6 parcellaire
• Documentation pas à jour

Typage

Sophistiqué mais optionnel

• boolean, number, string, Array<T>, Enum, Function, Object, tuples, any, void
• + les classes créées
• Syntaxe postfixée NOM:TYPE
• Tous les types sont effacés à la compilation

Syntaxe du typage

var name: string;
var x:number = 1;
var tab: string[] = ["hello", "world"];

function concat(i: number, o: any) : string {
	return i.toString() + o;
}
function add(i: number, b?: number) : number {
	return i + (b||0);
}
var myTuple: [string,string,number] = ["John", "Doe", 1983];

Typage implicite

var name;
var x = 1;
var tab = ["hello", "world"];

name = "Hello"; // ok
name = 3;       // ok

x = 5;    		// ok
x = "cinq"; 	// KO

tab = ["un", "deux"];  // ok
tab = "trois"          // KO

Le type peut être déduit à la compilation

Effacement du type

• Après la compilation, retour au javascript
• Pas de polymorphisme
• Recours au typeof / instanceof

Union de types

function display(data: string|number) {
	console.log("data: ", data);
}

function read(value:number|string): Date|number {
	if (typeof value == "number") {
		return value;
	}
	return new Date(value);
}

Transtypage

var value: string|number = 45;
var test = <string>value;

any

// Fonctionne comme un joker
var foo: any = 45;

function bar(a: any, b) { // b est any, car pas de déduction de type ici
	var test1: string = a;  // ok
	var test2: string = b;  // ok

	b = "foo"; // b reste any
	var test3: number = b;  // ok

	a = b; // ok
}

Type Guards

function foo(x: number | string) {
	if (typeof x === "string") {
		return x.length;  // x has type string here
	}
	else {
		return x + 1;     // x has type number here
	}
}

Classes et interfaces

• Syntaxe ES6
• Les membres sont publics par défaut
• Les modifieurs classiques: public/private/protected et static

Apporte à javsascript une approche de conception objet familière

Classes

Du sucre syntaxique sur le système objet à prototype

Héritage

Modifieurs d'accès

Les classiques: public/private/protected et static

class Player {
	score:number = 0;

	constructor(public name:string) {
	}

	addScore(points:number) : void {
		this.score += points;
	}

	private reset() {
		this.score = 0;
	}

	static create(name:string, score:number): Player {
		var player = new Player(name);
		player.addScore(score);
		return player;
	}
}

Les interfaces

• Même sémantique que dans les autres langages: un type abstrait qui ne contient ni données ni implémentation.
• Particularité: Elles disparaissent à la compilation

Vérifiés à la compilation

Extensions d'interface

Implémentation d'interface

** Tout est classique **

les fonctions "grosses flèches épaisses"Fat Arrows

Parfois appelées pédantesquement expressions lambdas

function divideBy2(data) {
	return data.map(function(el) {
		return el/2;
	});
}

Avec la notation ES6

function divideBy2(data: number[]) {
	return data.map( (el) => el/2 );
}

Corrige les problèmes de function()

function divideBy2(data: number[]) {
	return data.map( (el) => el/2 );
}

function divideBy2(data: number[]) {
	return data.map( (el) => {
		return el/2;
	});
}

Notation moins verbeuse

this n'est pas modifié

Correspond mieux au fonctionnement attendu Moins d'erreurs sur le this À préférer pour les débutants

Typage des fonctions

Génériques

Permet de rajouter des contraintes supplémentaires sur le typage

Génériques

Marche aussi sur les classes