INTRODUCTION À
TYPESCRIPT
Par Félix Billon
SOMMAIRE
1. Langage transcompilé
2. TypeScript
3. Écosystème
4. Les alternatives
5. Roadmap
LANGAGE TRANSCOMPILÉ : KÉZAKO
Langage pouvant être compilé en un autre langage.
Transcompilateur/transpileur ou encore com...
LANGAGE TRANSCOMPILÉ : EXEMPLE
SCSS/SASS/LESS ­> CSS
TypeScript/CoffeeScript/Flow/JSX ­> JavaScript
C# ­> JavaScript (DuoC...
LANGAGE TRANSCOMPILÉ :
AVANTAGES
Étend les fonctionnalités d'un langage existant.
Améliore la lisibilité et scalabilité du...
LANGAGE TRANSCOMPILÉ :
DÉSAVANTAGES
Prisonnier du langage transpilé choisi.
Lié au développement de l'écosystème.
TYPESCRIPT : LE CHOIX
Retour d'XP sur le choix de TypeScript.
“TypeScript c'est naze, ça apporte trop de
verbosité le code...
TYPESCRIPT : KÉZAKO
Langage transcompilé en JavaScript.
Support d'EcmaScript 3 et 5 (bientôt ).ES6
Utilisation de polyfill...
TYPESCRIPT : BREF HISTORIQUE
Preview depuis Octobre 2012
Avril 2014 : Release 1.0
Mars 2015 : 1.5­alpha
TYPESCRIPT : LES TYPES I
Static type checker !
Servent uniquement au compilateur (ne génère pas
de code).
Type : boolean, ...
TYPESCRIPT : LES TYPES II
Type spécial 'any', accepte tous les types.
Possibilité de mettre plusieurs types séparés par un...
TYPESCRIPT : LES INTERFACES
Servent uniquement au compilateur (ne génère pas
de code).
Différent types : array, function, ...
TYPESCRIPT : LES CLASSES I
class Chien implements IAnimal {
  //Propriété privée accessible via Getter/Setter
  private _n...
TYPESCRIPT : LES CLASSES II
Sucre syntaxique en attendant l'implementation ES6
(polyfill).
Constructeur avec ou sans param...
TYPESCRIPT : LES MODULES
Module externe : syntaxe CommonJS, AMD et
bientôt ES6
Module interne pour namespace.
/***********...
TYPESCRIPT : LES FONCTIONS
Paramètre optionel et paramètre avec valeur par
défaut.
Paramètre rest.
Fonction fléchée ou lam...
TYPESCRIPT : FICHIERS DE DÉFINITIONS
Définition d'une librairie externe.
Existe pour les librairies les plus utilisées (Jq...
ÉCOSYSTÈME : IDE
Visual Studio ( , et 2015) / Microsoft2012 2013
Webstorm / JetBrain
Brackets / Adobe
Atom / Github
Eclips...
ÉCOSYSTÈME : DIVERS
Analyse de code (tslint).
Intégration à gulp, grunt, broccoli, ...
Pre­processor karma.
Support JsDoc....
LES ALTERNATIVES : DART
Ecosystème dédié (IDE, VM, ...).
Langage standardisé auprès de l'ECMA depuis
décembre 2013.
Permet...
LES ALTERNATIVES : COFFEESCRIPT
Static type checker ? NO !
Simplification de la syntaxe du JavaScript.
Intégration des évo...
LES ALTERNATIVES : FLOW
Static type checker !
Mis en place et suivi par Facebook.
Opposé à TypeScript sur plusieurs notion...
ROADMAP
1.6 : generator (ES6) et async/await (ES7).
2.0 : intégration des features les plus demandées
(mixins, classes abs...
MERCI À TOUS !
Prochain SlideShare
Chargement dans…5
×

Introduction TypeScript

1 844 vues

Publié le

Introduction au langage transcompilé : TypeScript.

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

Aucun téléchargement
Vues
Nombre de vues
1 844
Sur SlideShare
0
Issues des intégrations
0
Intégrations
241
Actions
Partages
0
Téléchargements
32
Commentaires
0
J’aime
2
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 !

×