Introduction TypeScript

1 715 vues

Publié le

Introduction au langage transcompilé : TypeScript.

Publié dans : Technologie
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 715
Sur SlideShare
0
Issues des intégrations
0
Intégrations
240
Actions
Partages
0
Téléchargements
27
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Introduction TypeScript

  1. 1. INTRODUCTION À TYPESCRIPT Par Félix Billon
  2. 2. SOMMAIRE 1. Langage transcompilé 2. TypeScript 3. Écosystème 4. Les alternatives 5. Roadmap
  3. 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. 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. 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. 6. LANGAGE TRANSCOMPILÉ : DÉSAVANTAGES Prisonnier du langage transpilé choisi. Lié au développement de l'écosystème.
  7. 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. 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. 9. TYPESCRIPT : BREF HISTORIQUE Preview depuis Octobre 2012 Avril 2014 : Release 1.0 Mars 2015 : 1.5­alpha
  10. 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. 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. 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. 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. 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. 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. 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. 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. 18. ÉCOSYSTÈME : IDE Visual Studio ( , et 2015) / Microsoft2012 2013 Webstorm / JetBrain Brackets / Adobe Atom / Github Eclipse Sublime text
  19. 19. ÉCOSYSTÈME : DIVERS Analyse de code (tslint). Intégration à gulp, grunt, broccoli, ... Pre­processor karma. Support JsDoc. Support webpack, browserify, ...
  20. 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. 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. 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. 23. ROADMAP 1.6 : generator (ES6) et async/await (ES7). 2.0 : intégration des features les plus demandées (mixins, classes abstraites, ...).
  24. 24. MERCI À TOUS !

×