Types everywhere!

Presentation made at a meetup organized by MugInClermont, LavaJUG and Clermont'ech!

Abstract (in French):
L’engouement autour de TypeScript ne cesse de croitre depuis la version 2.0. En quelques mois, le langage est devenu un incontournable dans les entreprises, mais aussi dans la communauté open source. Au départ considéré comme un énième langage, il a atteint depuis quelques semaines le score symbolique du million de téléchargement journalier sur NPM, le gestionnaire de packages de Node.js.

Comment TypeScript en est-il arrivé là ?

C’est grâce à un système de typage particulièrement avancé qu’il s’est taillé la réputation d’être puissant, pragmatique et fiable ! Ces nombreuses qualités masquent parfois une certaine complexité qui, si mal maîtrisée, peuvent en décourage plus d’un ! C’est pourquoi dans cette présentation, après une introduction sur le langage, nous nous pencherons sur certaines capacités de TypeScript autour de la manipulation des types.

Live coding source are available on github: https://github.com/spontoreau/typescript-typesystem

Transcript

1. Mug in Clermont | LavaJUG | Clermont'ech, March 2019
   

   View Slide

2. Premier Field Engineer
   @spontoreau
   In ❤️ with
   Co-organizer
   

   View Slide

3. @ParisTypeScript
   

   View Slide

4. View Slide

5. https://github.com/Microsoft/TypeScript
   

   View Slide

6. View Slide

7. transpile
   ts
   js
   $ tsc
   config
   

   View Slide

8. Editors
   tsserver
   server.ts
   Language Service
   service.ts
   TS standalone compiler
   tsc.ts
   Core TypeScript Compiler
   core.ts, emitter.ts, checker.ts, parser.ts, …
   

   View Slide

9. 
   
   ✋
   

   View Slide

10. {
    "name": "angular-with-dts",
    "version": "1.0.0",
    "dependencies": {
    "angular": "1.5.8"
    },
    "devDependencies": {
    "@types/angular":"1.5.20"
    }
    }
    $ npm install --save-dev @types/angular
    package.json:
    

    View Slide

11. View Slide

12. View Slide

13. let str: string;
    let array: number[] = [1, 2, 3];
    function fn(param: boolean): void {
    // Do something
    }
    

    View Slide

14. interface Rocket {
    boosters: number;
    launch: () => void;
    }
    class Soyuz implements Rocket {
    boosters : number;
    constructor() {
    this.boosters = 4;
    }
    launch(): void { … };
    }
    let soyuzT15: Rocket = new Soyuz();
    let soyuzMS3: Soyuz = new Soyuz();
    Class or
    Interface…
    How to choose?
    

    View Slide

15. any
    

    View Slide

16. class Rocket {
    name: string;
    boosters: number;
    }
    class Cat {
    name: string;
    }
    function playWithKitten(kitten: Cat) {
    // Do something
    }
    const rocket: Rocket = {
    name: "Soyuz",
    boosters: 4
    };
    const cat: Cat = {
    name: "Grumpy"
    };
    playWithKitten(cat);
    playWithKitten(rocket); // ☺
    

    View Slide

17. • TypeScript is JavaScript.
    • Interface is only a TypeScript compiler concept (type checking).
    • Sometime you have to deal with the any type (Example: third part).
    • The Duck example:
    const duck = {
    fly: () => console.log("I can fly!"),
    swim: () => console.log("I can swin!"),
    feather: true
    };
    const penguin = {
    swim: () => console.log("I can swin!"),
    feather: true
    };
    const isDuck = (obj: any) => (obj.hasOwnProperty("feather")
    && obj.fly
    && obj.swim);
    if(isDuck(duck)) {
    (duck).fly();
    }
    if(!isDuck(penguin)) {
    console.log("Penguin can't fly...")
    }
    

    View Slide

18. interface Rocket {
    boosters: number;
    launch?: () => void;
    }
    Read-only:
    interface Rocket {
    readonly boosters: number;
    launch?: () => void;
    }
    interface Launch {
    () => void;
    }
    Function:
    Cannot be
    implemented by a
    class !
    

    View Slide

19. abstract class Rocket {
    boosters: string;
    abstract launch(): void;
    }
    class Soyuz extends Rocket {
    }
    class Soyuz extends Rocket {
    launch(): void {
    throw new Error("Not implemented.");
    }
    }
    

    View Slide

20. abstract class Rocket {
    readonly boosters: number;
    constructor(boosters: number) {
    this.boosters = boosters;
    }
    abstract launch() : void;
    }
    class RocketFactory {
    ctor: new (boosters: number) => T;
    constructor(ctor: new (boosters: number) => T) {
    this.ctor = ctor;
    }
    create(boosters: number): T {
    return new this.ctor(boosters);
    }
    }
    

    View Slide

21. View Slide

22. Types === static constraints
    • Type categories:
    • primitive
    • object
    • union
    • intersection
    • Special type:
    • any
    • null
    • undefined
    • void
    • Type alias
    type Bool = boolean;
    

    View Slide

23. The light version ☺
    undefined
    null
    void
    number
    primitive
    string
    boolean
    any
    object
    array
    class
    interface
    function
    

    View Slide

24. Discriminated
    Union
    Intersection
    Union Type Guards
    Mapped Conditional Infer Immutability
    

    View Slide

25. View Slide

26. View Slide

27. View Slide

28. View Slide

29. View Slide