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 opensource.”
“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).Opensource, source disponible sur github.
TYPESCRIPT : BREF HISTORIQUEPreview depuis Octobre 2012Avril 2014 : Release 1.0Mars 2015 : 1.5alpha
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'autocomplé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, ...Preprocessor 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 nonnull,...).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 !
Top Related