Introduction au langage transcompilé : TypeScript.

1. INTRODUCTION À
TYPESCRIPT
Par Félix Billon

2. SOMMAIRE
1. Langage transcompilé
2. TypeScript
3. Écosystème
4. Les alternatives
5. Roadmap

3. LANGAGE TRANSCOMPILÉ : KÉZAKO
Langage pouvant être compilé en un autre langage.
Transcompilateur/transpileur ou encore compilateur
source à source.
Langage existant ou surcouche d'un langage
existant.

4. LANGAGE TRANSCOMPILÉ : EXEMPLE
SCSS/SASS/LESS ­> CSS
TypeScript/CoffeeScript/Flow/JSX ­> JavaScript
C# ­> JavaScript (DuoCode)
C++ ­> C (cfront)
Go ­> JavaScript (Go2js)
C++/C ­> JavaScript (Emscripten)
La bible des langages transcompilés en JavaScript

5. LANGAGE TRANSCOMPILÉ :
AVANTAGES
Étend les fonctionnalités d'un langage existant.
Améliore la lisibilité et scalabilité du code.
Amène une phase de compilation aux langages
interprétés.
Permet d'écrire du code "futuriste".

6. LANGAGE TRANSCOMPILÉ :
DÉSAVANTAGES
Prisonnier du langage transpilé choisi.
Lié au développement de l'écosystème.

7. TYPESCRIPT : LE CHOIX
Retour d'XP sur le choix de TypeScript.
“TypeScript c'est naze, ça apporte trop de
verbosité le code devient illisible.”
“C'est open­source.”
“La communauté est inexistante.”
“On n'aime pas le JavaScript, TypeScript
nous donnera l'impression de faire du C#.”

8. TYPESCRIPT : KÉZAKO
Langage transcompilé en JavaScript.
Support d'EcmaScript 3 et 5 (bientôt ).ES6
Utilisation de polyfills.
Mis en place et suivi par Microsoft.
Grande équipe de contributeur (dont Anders
Hejlsberg).
Open­source, source disponible sur github.

9. TYPESCRIPT : BREF HISTORIQUE
Preview depuis Octobre 2012
Avril 2014 : Release 1.0
Mars 2015 : 1.5­alpha

10. TYPESCRIPT : LES TYPES I
Static type checker !
Servent uniquement au compilateur (ne génère pas
de code).
Type : boolean, number, string, Array, Date, ...
var x: string;
var y: number;
var z: number[];
var t: Date;
function convert(foo: boolean, bar: Array‹string›): void {
//...
}
z = 42; //Erreur
y = 'Bonjour'; //Erreur
convert(true, ['Hello','World']); //OK
t.toFixed(1) //Erreur

11. TYPESCRIPT : LES TYPES II
Type spécial 'any', accepte tous les types.
Possibilité de mettre plusieurs types séparés par un
pipe (typescript 1.3)
Possibilité de définir des alias (typescript 1.4)
type PrimitiveArray = Array‹string|number|boolean›;
var x: string | number;
var y: PrimitiveArray;
var z: any;
y = ['Bonjour', 42, true]; //OK
z = 4; //OK
z = 'Bonjour'; //OK
x = true; //Erreur

12. TYPESCRIPT : LES INTERFACES
Servent uniquement au compilateur (ne génère pas
de code).
Différent types : array, function, class et hybrid.
Possibilité d'étendre une interface.
//Interface type class
interface IAnimal {
nbPatte: number;
mange(nourriture: string): void;
nbAile?: boolean; //Propriété optionnelle
}
//Interface type function
interface IAddFn {
(nb: number, nb2: number): number;
}
var addFn: IAddFn;
var addFn = function(nb: number, nb2: number): number {
//...
}

13. TYPESCRIPT : LES CLASSES I
class Chien implements IAnimal {
//Propriété privée accessible via Getter/Setter
private _nbPatte: number;
get nbPatte(): number {
return this._nbPatte;
}
set nbPatte(newnbPatte: number){
this._nbPatte = newnbPatte;
}
//Propriété public
public couleur: string;
//Constructeur
constructor(couleur: string) {
this.couleur = couleur;
this.nbPatte = 4;
}

14. TYPESCRIPT : LES CLASSES II
Sucre syntaxique en attendant l'implementation ES6
(polyfill).
Constructeur avec ou sans paramètre.
Accesseur public, privé et protected.
Héritage et implémentation d'interface.
Propriété static.
Accesseurs (get/set seulement avec ES5).

15. TYPESCRIPT : LES MODULES
Module externe : syntaxe CommonJS, AMD et
bientôt ES6
Module interne pour namespace.
/**********************************­Module externe­********************************/
//Chien.ts
export class Chien {
//...
}
//Main.ts
import chien = require('./Chien');
var x = new chien();
/**********************************­Module interne­********************************/
//TypeAnimal.ts
module Animal {
export class Vertebrer {
//...
}
export module Invertebrer {
//...

16. TYPESCRIPT : LES FONCTIONS
Paramètre optionel et paramètre avec valeur par
défaut.
Paramètre rest.
Fonction fléchée ou lambda.
function cuisiner(viande: string, ...assaisonnement: Array‹string›): void {
var listAssaisonnement: string = assaisonnement.join(',');
}
function nettoyer(instrument = "éponge"): void {
//...
}
var decorer = (viande: string, decoration: Array‹string›): string
=> (viande + decoration.join(','));

17. TYPESCRIPT : FICHIERS DE DÉFINITIONS
Définition d'une librairie externe.
Existe pour les librairies les plus utilisées (Jquery,
AngularJs, D3Js, node, grunt, karma, ...)
Permet d'avoir l'auto­complétion, détection de type
static et documentation (JsDoc).
/// ‹reference path="./angularjs/angular.d.ts" /›
var $filter: ng.IFilterService;
var $scope: ng.IScope;
$scope.toto(); //Error
$scope.$digest(); //Ok

18. ÉCOSYSTÈME : IDE
Visual Studio ( , et 2015) / Microsoft2012 2013
Webstorm / JetBrain
Brackets / Adobe
Atom / Github
Eclipse
Sublime text

19. ÉCOSYSTÈME : DIVERS
Analyse de code (tslint).
Intégration à gulp, grunt, broccoli, ...
Pre­processor karma.
Support JsDoc.
Support webpack, browserify, ...

20. LES ALTERNATIVES : DART
Ecosystème dédié (IDE, VM, ...).
Langage standardisé auprès de l'ECMA depuis
décembre 2013.
Permet de réaliser des applis desktop et web.
Peut utiliser une machine virtuelle.
Plus fourni que TypeScript : metadata, méthode
abstraite, ...
Site officiel

21. LES ALTERNATIVES : COFFEESCRIPT
Static type checker ? NO !
Simplification de la syntaxe du JavaScript.
Intégration des évolutions proposées par ES6.
Grande communauté et écosystème développé.
Site officiel

22. LES ALTERNATIVES : FLOW
Static type checker !
Mis en place et suivi par Facebook.
Opposé à TypeScript sur plusieurs notions (mixed et
any, type non­null,...).
Roadmap ambicieuse : intégration d'ES6, intégration
IDE, fichiers de définitions...
Se pose clairement comme un concurrent de
TypeScript.
Site officiel

23. ROADMAP
1.6 : generator (ES6) et async/await (ES7).
2.0 : intégration des features les plus demandées
(mixins, classes abstraites, ...).

24. MERCI À TOUS !