Télécharger en tant que PDF, PPTX
![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](https://image.slidesharecdn.com/introductiontypescript-150427013000-conversion-gate01/75/Introduction-TypeScript-10-2048.jpg)
![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](https://image.slidesharecdn.com/introductiontypescript-150427013000-conversion-gate01/75/Introduction-TypeScript-11-2048.jpg)
Introduction TypeScript
- 1.
- 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 Étendles 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 Prisonnierdu langage transpilé choisi. Lié au développement de l'écosystème.
- 7. TYPESCRIPT : LECHOIX Retour d'XP sur le choix de TypeScript. “TypeScript c'est naze, ça apporte trop de verbosité le code devient illisible.” “C'est opensource.” “La communauté est inexistante.” “On n'aime pas le JavaScript, TypeScript nous donnera l'impression de faire du C#.”
- 8. TYPESCRIPT : KÉZAKO Langagetranscompilé 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). Opensource, source disponible sur github.
- 9. TYPESCRIPT : BREFHISTORIQUE Preview depuis Octobre 2012 Avril 2014 : Release 1.0 Mars 2015 : 1.5alpha
- 10. TYPESCRIPT : LESTYPES 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 : LESTYPES 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 : LESINTERFACES 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 : LESCLASSES 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 : LESCLASSES 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 : LESMODULES 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 : LESFONCTIONS 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 : FICHIERSDE 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'autocomplé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 VisualStudio ( , et 2015) / Microsoft2012 2013 Webstorm / JetBrain Brackets / Adobe Atom / Github Eclipse Sublime text
- 19. ÉCOSYSTÈME : DIVERS Analysede code (tslint). Intégration à gulp, grunt, broccoli, ... Preprocessor 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 nonnull,...). 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.