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
2. Premier Field Engineer @spontoreau In ❤️ with Co-organizer
3. @ParisTypeScript
5. https://github.com/Microsoft/TypeScript
7. transpile ts js $ tsc config
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, …
9. ✋
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:
13. let str: string; let array: number[] = [1, 2, 3]; function fn(param: boolean): void { // Do something }
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?
15. any
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); // ☺
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...") }
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 !
19. abstract class Rocket { boosters: string; abstract launch(): void; } class Soyuz extends Rocket { } class Soyuz extends Rocket { launch(): void { throw new Error("Not implemented."); } }
20. abstract class Rocket { readonly boosters: number; constructor(boosters: number) { this.boosters = boosters; } abstract launch() : void; } class RocketFactory<T extends Rocket> { ctor: new (boosters: number) => T; constructor(ctor: new (boosters: number) => T) { this.ctor = ctor; } create(boosters: number): T { return new this.ctor(boosters); } }
22. Types === static constraints • Type categories: • primitive • object • union • intersection • Special type: • any • null • undefined • void • Type alias type Bool = boolean;
23. The light version ☺ undefined null void number primitive string boolean any object array class interface function
24. Discriminated Union Intersection Union Type Guards Mapped Conditional Infer Immutability