INTRODUCTION ÀTYPESCRIPT

Par Félix Billon

SOMMAIRE1. Langage transcompilé2. TypeScript3. Écosystème4. Les alternatives5. Roadmap

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

LANGAGE TRANSCOMPILÉ : EXEMPLESCSS/SASS/LESS ­> CSSTypeScript/CoffeeScript/Flow/JSX ­> JavaScriptC# ­> JavaScript (DuoCode)C++ ­> C (cfront)Go ­> JavaScript (Go2js)C++/C ­> JavaScript (Emscripten)

La bible des langages transcompilés en JavaScript

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 langagesinterprétés.Permet d'écrire du code "futuriste".

LANGAGE TRANSCOMPILÉ :DÉSAVANTAGES

Prisonnier du langage transpilé choisi.Lié au développement de l'écosystème.

TYPESCRIPT : LE CHOIXRetour d'XP sur le choix de TypeScript.

“TypeScript c'est naze, ça apporte trop deverbosité le code devient illisible.”

“C'est open­source.”

“La communauté est inexistante.”

“On n'aime pas le JavaScript, TypeScriptnous donnera l'impression de faire du C#.”

TYPESCRIPT : KÉZAKOLangage transcompilé en JavaScript.Support d'EcmaScript 3 et 5 (bientôt ).ES6Utilisation de polyfills.Mis en place et suivi par Microsoft.Grande équipe de contributeur (dont AndersHejlsberg).Open­source, source disponible sur github.

TYPESCRIPT : BREF HISTORIQUEPreview depuis Octobre 2012Avril 2014 : Release 1.0Mars 2015 : 1.5­alpha

TYPESCRIPT : LES TYPES IStatic type checker !Servent uniquement au compilateur (ne génère pasde 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; //Erreury = 'Bonjour'; //Erreurconvert(true, ['Hello','World']); //OKt.toFixed(1) //Erreur

TYPESCRIPT : LES TYPES IIType spécial 'any', accepte tous les types.Possibilité de mettre plusieurs types séparés par unpipe (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]; //OKz = 4; //OKz = 'Bonjour'; //OKx = true; //Erreur

TYPESCRIPT : LES INTERFACESServent uniquement au compilateur (ne génère pasde 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 //...

TYPESCRIPT : LES CLASSES Iclass 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;

TYPESCRIPT : LES CLASSES IISucre 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).

TYPESCRIPT : LES MODULESModule externe : syntaxe CommonJS, AMD etbientôt ES6Module interne pour namespace./**********************************­Module externe­********************************/ //Chien.ts export class Chien //...

//Main.ts import chien = require('./Chien');var x = new chien();

/**********************************­Module interne­********************************/ //TypeAnimal.tsmodule Animal export class Vertebrer //... export module Invertebrer //...

TYPESCRIPT : LES FONCTIONSParamètre optionel et paramètre avec valeur pardé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(','));

TYPESCRIPT : FICHIERS DE DÉFINITIONSDé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 typestatic et documentation (JsDoc)./// ‹reference path="./angularjs/angular.d.ts" /› var $filter: ng.IFilterService;var $scope: ng.IScope;

$scope.toto(); //Error$scope.$digest(); //Ok

ÉCOSYSTÈME : IDEVisual Studio ( , et 2015) / Microsoft2012 2013Webstorm / JetBrainBrackets / AdobeAtom / GithubEclipseSublime text

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

LES ALTERNATIVES : DARTEcosystème dédié (IDE, VM, ...).Langage standardisé auprès de l'ECMA depuisdécembre 2013.Permet de réaliser des applis desktop et web.Peut utiliser une machine virtuelle.Plus fourni que TypeScript : metadata, méthodeabstraite, ...

Site officiel

LES ALTERNATIVES : COFFEESCRIPTStatic 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

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

Site officiel

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

MERCI À TOUS !