DevFest Paris 2019 - TypeScript: Why? When? How?

Slides from the talk I did at DevFest Paris 2019 with my mate Félix Billon!

Video (French): https://www.youtube.com/watch?v=Wf4W0T1bNNo

1. TypeScript: Why? When? How? Félix Billon Sylvain Pontoreau
2. Félix Billon Tech Lead @felix_billon Who we are? Sylvain Pontoreau Field Engineer @spontoreau
3. Paris TypeScript meetup @ParisTypeScript
4. Introduction
5. The beginning October, 2012: Preview April, 2014: version 1.0 Idea was here, without the rest…
6. The rebirth Late 2014: AtScript annoucement March, 2015: Angular 2 will be based on TypeScript September, 2016: Version 2.0! A lot of progress has been done since 1.0 (currently 3.x): • Performance improvement • Better integration with IDEs • Easier JavaScript library integration
7. Where are we today? Trends Stackoverflow Github npm
8. TypeScript & OSS Code Angular Ionic / Stencil rxjs NativeScript TensorFlow.js NestJS Jest vue.js yarn
9. You're in good company • Microsoft • Google • Slack • Facebook • Ionic • Palantir • Ubisoft • Wix • Dashlane • …
10. Types
11. Types, why? Find errors at compile time instead of runtime Improve code readability Less bugs Improve IDEs features: • Autocomplete • Code inspection • Refactoring
12. Types in TypeScript boolean, number, string, array, void, null, undefined, object Example: let str: string; let array: number[] = [1, 2, 3]; function fn(param: boolean): void { // Do something }
13. Classes & Interfaces 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?
14. Types, how? Take care of the any special type Types are only useful at compile time Compiler can infer types Duck typing != nominal typing
15. Duck typings 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); // ☺
16. Definition files Describe and type JavaScript code NPM package & TypeScript: • Wrote in TypeScript • Wrote in JavaScript + definition included • Wrote in JavaScript without definition ✋ • Definition package required (@types) DefinitelyTyped lib.d.ts
17. Definition files Installation: { "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:
18. Language features
19. Abstraction Asbtract classes & methods: abstract class Rocket { boosters: string; abstract launch(): void; } class Soyuz extends Rocket { } class Soyuz extends Rocket { launch(): void { throw new Error("Not implemented."); } }
20. Back to interfaces Optional: 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 !
21. Generics An example with the Factory pattern: 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. Asynchronous Example: getRockets(): Promise<Rocket> { return fetch("http://rockets-api.com") .then((response) => { return response.json(); }); } async getRockets(): Promise<Rocket> { const res = await fetch("…"); return await res.json(); } ES3+ compability
23. Modules, TypeScript to the rescue! Export: Import: Compatibility: Common, AMD, UMD, System, ES2015 Only one will survive: ES2015! export class Rocket { // … } import { Rocket } from "./rocket";
24. Decorators Currently experimental! Can be apply on: • Classes • Methods • Properties • Parameters TC 39: Stage 2 Draft "experimentalDecorators": true, "emitDecoratorMetadata": true,
25. Decorators const track: MethodDecorator = ( target: any, key: string | symbol, descriptor: PropertyDescriptor ) => { const calledFunction = descriptor.value; const newFunction = function() { Telemetry.Track({ className: target.constructor.name, methodName: key.toString(), parameters: arguments }); return calledFunction.apply(this, arguments); }; descriptor.value = newFunction; return descriptor; };
26. Decorators Usage: class Rocket { orientation: Vector3 = new Vector3(0.0, 0.0, 1.0); @track correctPath(vector: Vector3) { this.orientation.add(vector); } } const rocket = new Rocket(); // Telemetry will track: // {"className":"Rocket","methodName":"correctPath","parameters":{"0":{"x":0.1,"y":0.2,"z":0}}} rocket.correctPath(new Vector3(0.1, 0.2, 0.0));
27. Inner workings
28. Architecture
29. tsconfig.json • A configuration file that contains compiler options! • Can be initialized with the CLI: • Example: { "compilerOptions": { "target": "es5", "module": "es2015", "removeComments": true, "sourceMap": true }, "include": [ "src/**/*" ] } $ tsc --init
30. Zoom on compilation’s options { "compilerOptions": { "target": "es5", "module": "es2015", "sourceMap": true, "importHelpers": true, "noEmitHelpers": true, "strict": true, "lib": ["es6", "dom"], … } } • Barely hundred compilation’s options • Some important options:
31. From JavaScript To TypeScript
32. JavaScript to TypeScript A line of JavaScript is a line of TypeScript $ tsc --init
33. JavaScript to TypeScript Check JavaScript code with TypeScript • For a single file: // @ts-check • Overall (tsconfig.json): checkJs: 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 ...
34. Conclusion
35. Conclusion • Take care, TypeScript !== C#, Java, … • The community is amazing • TypeScript have an influence on JavaScript • Evolutivity, Maintenability, Scalability • Great tools!
36. Questions?
37. Thanks ☺