TypeScript: Why? When? How?

TypeScript: Why? When? How?

Microsoft experiences 2018 session with Félix Billon

9298dcce5b2b0e88d8ffbb837192ca98?s=128

Sylvain Pontoreau

November 07, 2018
Tweet

Transcript

  1. #experiences18 TypeScript: Why? When? How? Félix Billon (DCube) Sylvain PONTOREAU

    (Microsoft)
  2. #experiences18 Microsoft experiences18 Jeu-concours Twitter Un pack Surface Go à

    gagner* ! *Voir toutes les conditions dans le règlement lié au jeu concours  Le tweet cumulant le plus de Retweets remporte la Surface Go (1 lot/jour) 1 Prenez une photo de la session à laquelle vous participez 2 Ajoutez #experienceslive et #experiences18 à votre tweet 3 Partagez ! #experienceslive 1 2 3
  3. #experiences18 Microsoft experiences18 Félix Billon Tech Lead @felix_billon Vos speakers

    pour cette session! Sylvain Pontoreau Premier Field Engineer @spontoreau
  4. #experiences18 Microsoft experiences18 Meetup- Paris TypeScript #experiences18 @ParisTypeScript

  5. #experiences18 Microsoft experiences18 Sommaire ## Introduction ## Typage ## Spécificités

    du langage ## Fonctionnement interne ## De JavaScript à TypeScript ## Conclusion #experiences18
  6. #experiences18 Microsoft experiences18 Introduction

  7. #experiences18 Microsoft experiences18 Le commencement • Octobre 2012 : preview.

    • Avril 2014 : release 1.0.
  8. #experiences18 Microsoft experiences18 Le renouveau • Fin 2014 : Annonce

    d'AtScript. • Mars 2015 : Angular 2 sera finalement basé sur TypeScript. • Septembre 2016 : TypeScript 2.0 !
  9. #experiences18 Microsoft experiences18 Où en est-on aujourd'hui ? Popularité Github

    npm Stackoverflow
  10. #experiences18 Microsoft experiences18 TypeScript dans le monde open source Visual

    Studio Code Angular Ionic / Stencil rxjs NativeScript TensorFlow.js NestJS vue.js En cours
  11. #experiences18 Microsoft experiences18 TypeScript chez Microsoft Visual Studio Code CosmosDB

    BotBuilder Azure Isomorphic Teams Skype Sharepoint Babylon.js
  12. #experiences18 Microsoft experiences18 Vous êtes en bonne compagnie! • Dashlane

  13. #experiences18 Microsoft experiences18 Les outils de développement Microsoft Visual Studio

    Visual Studio Code
  14. #experiences18 Microsoft experiences18 Typage

  15. #experiences18 Microsoft experiences18 Les types, pourquoi?

  16. #experiences18 Microsoft experiences18 Les types basiques • boolean, number, string,

    array, void, null, undefined, object. let name: string; let list: number[] = [1, 2, 3]; function fn(param: boolean): void { // Do something }
  17. #experiences18 Microsoft experiences18 Classes et interfaces interface Ninja { nbShuriken:

    number; throwShuriken: () => void; } class NinjaTurtle implements Ninja { nbShuriken: number; constructor() { this.nbShuriken = 6; } throwShuriken(): void { // Throw shuriken }; } let leonardo: Ninja = new NinjaTurtle(); let donatelo: NinjaTutle = new NinjaTurtle();
  18. #experiences18 Microsoft experiences18 Les types, comment ? any

  19. #experiences18 Microsoft experiences18 Duck typings class Order { id: number;

    } class User { id: number; name: string; } function processOrder(order: Order) { // Do something } const order: Order = { id: 10 }; const user: User = { id: 54, name: "Félix" }; processOrder(order); processOrder(user); //
  20. #experiences18 Microsoft experiences18 Les fichiers de définition ✋

  21. #experiences18 Microsoft experiences18 Les fichiers de définition $ npm install

    --save-dev @types/angular { "name": "angular-with-dts", "version": "1.0.0", "dependencies": { "angular": "1.5.8" }, "devDependencies": { "@types/angular":"1.5.20" } } • Installation : • Contenu package.json :
  22. #experiences18 Microsoft experiences18 Les spécificités du langage

  23. #experiences18 Microsoft experiences18 Abstraction abstract class Animal { name: string;

    abstract say(): void; } class Dog extends Animal { } class Dog extends Animal { say(): void { throw new Error("Not implemented."); } }
  24. #experiences18 Microsoft experiences18 Retour sur les interfaces interface Animal {

    name: string; say?: () => void; } interface Animal { readonly name: string; say?: () => void; } interface Say { () => void; } Ne peut pas être implémenté par une classe !
  25. #experiences18 Microsoft experiences18 La généricité abstract class Animal { readonly

    name: string; constructor(name: string) { this.name = name; } abstract say() : void; } class AnimalFactory<T extends Animal> { ctor: new (name: string) => T; constructor(ctor: new (name: string) => T) { this.ctor = ctor; } create(name: string): T { return new this.ctor(name); } }
  26. #experiences18 Microsoft experiences18 L'asynchronisme getAnimals(): Promise<Animal> { fetch("http://awesome-zoo.com") .then((response) =>

    { response.json((data) => { return data; }); }); } async getAnimals(): Promise<Animal> { const res = await fetch("…"); return await res.json(); } Compatible ES3+
  27. #experiences18 Microsoft experiences18 Les modules, TypeScript à la rescousse! export

    class Animal { // … } import { Animal } from "./animal";
  28. #experiences18 Microsoft experiences18 Les decorateurs

  29. #experiences18 Microsoft experiences18 Les decorateurs function log(target: object, key: string,

    descriptor: PropertyDescriptor) { const calledFunction = descriptor.value; descriptor.value = function () { for(let i = 0, l = arguments.length; i < l; i++) { console.log(arguments[i]); } return calledFunction.apply(this, arguments); }; return descriptor; }
  30. #experiences18 Microsoft experiences18 Les decorateurs class Calculator { @log sum(...numbers:

    number[]): number { return numbers.reduce((previous, current) => previous + current); } } const calculator = new Calculator(); const result = calculator.sum(1, 2, 3, 4, 5); //Affiche: 1 2 3 4 5 console.log(result); //Affiche 15
  31. #experiences18 Microsoft experiences18 Fonctionnement interne

  32. #experiences18 Microsoft experiences18 Architecture

  33. #experiences18 Microsoft experiences18 tsconfig.json • Fichier de configuration contenant les

    options de compilations. • Initialisé à l'aide de la CLI : • Exemple de contenue : { "compilerOptions": { "target": "es5", "module": "es2015", "removeComments": true, "sourceMap": true }, "include": [ "src/**/*" ] } $ tsc --init
  34. #experiences18 Microsoft experiences18 De JavaScript à TypeScript

  35. #experiences18 Microsoft experiences18 JavaScript vers TypeScript $ tsc --init

  36. #experiences18 Microsoft experiences18 JavaScript vers TypeScript // @ts-check true function

    sum(numbers) { return numbers .reduce(function(previous, next) { return previous + next; }); } var result = sum([true, 2, "3"]); console.log(result); // 33 ... // @ts-check /** * @param {number[]} numbers */ function sum(numbers) { return numbers .reduce(function(previous, next) { return previous + next; }); } var value = sum([true, 2, "3"]); console.log(result); // 33 ...
  37. #experiences18 Microsoft experiences18 Conclusion

  38. #experiences18 Microsoft experiences18 Conclusion

  39. #experiences18 Microsoft experiences18 Conclusion Questions ?

  40. #experiences18 Microsoft experiences18 Notez maintenant cette session Rendez-vous sur la

    fiche de la session sur http://experiences18.microsoft.fr Cliquez sur le bouton « Evaluer » #experienceslive
  41. #experiences18 Microsoft experiences18 Merci à vous !

  42. None