Slide 1

Slide 1 text

TypeScript: Why? When? How? Félix Billon Sylvain Pontoreau

Slide 2

Slide 2 text

Félix Billon Tech Lead @felix_billon Who we are? Sylvain Pontoreau Engineer @spontoreau

Slide 3

Slide 3 text

Paris TypeScript meetup @ParisTypeScript

Slide 4

Slide 4 text

Introduction

Slide 5

Slide 5 text

The beginning October, 2012: Preview April, 2014: version 1.0 Idea was here, without the rest…

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Where are we today? Trends Stack Overflow GitHub npm

Slide 8

Slide 8 text

TypeScript & OSS Code Angular Ionic / Stencil rxjs NativeScript TensorFlow.js NestJS Jest vue.js yarn

Slide 9

Slide 9 text

You're in good company • Microsoft • Google • Slack • Facebook • Ionic • Palantir • Ubisoft • Wix • Dashlane • …

Slide 10

Slide 10 text

Types

Slide 11

Slide 11 text

Types, why? Find errors at compile time instead of runtime Improve code readability Less bugs Improve IDEs features: • Autocomplete • Code inspection • Refactoring

Slide 12

Slide 12 text

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 }

Slide 13

Slide 13 text

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?

Slide 14

Slide 14 text

Types, how? Take care of the any special type Types are only useful at compile time Compiler can infer types Duck typing != nominal typing

Slide 15

Slide 15 text

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); // ☺

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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:

Slide 18

Slide 18 text

Language features

Slide 19

Slide 19 text

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."); } }

Slide 20

Slide 20 text

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 !

Slide 21

Slide 21 text

Generics An example with the Factory pattern: 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); } }

Slide 22

Slide 22 text

Type system Types === static constraints type Launching = () => void; type Launching = (value: Rocket | Engine) => void; type Soyuz = Rocket & { name: "Soyuz"; } type Rocket = Engine & Boosters & Fairing & …; Type aliases Singleton type property Intersection type (and -> &) Union type (or -> |)

Slide 23

Slide 23 text

Type system Discriminated Union Intersection Union Type Guards Mapped Conditional Infer Immutability

Slide 24

Slide 24 text

Decorators Currently experimental! Can be apply on: • Classes • Methods • Properties • Parameters TC 39: Stage 2 Draft "experimentalDecorators": true, "emitDecoratorMetadata": true,

Slide 25

Slide 25 text

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; };

Slide 26

Slide 26 text

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));

Slide 27

Slide 27 text

Inner workings

Slide 28

Slide 28 text

Architecture

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

Zoom on compilation’s options { "compilerOptions": { "target": "es5", "module": "es2015", "sourceMap": true, "strict": true, "lib": ["es6", "dom"], … } } • Barely hundred compilation’s options • Some important options:

Slide 31

Slide 31 text

From JavaScript To TypeScript

Slide 32

Slide 32 text

JavaScript to TypeScript A line of JavaScript is a line of TypeScript $ tsc --init

Slide 33

Slide 33 text

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 result = sum([true, 2, "3"]); console.log(result); // 33 ...

Slide 34

Slide 34 text

Conclusion

Slide 35

Slide 35 text

Conclusion • Take care, TypeScript !== C#, Java, … • The community is amazing • TypeScript have an influence on JavaScript • Evolutivity, Maintenability, Scalability • Great tools!

Slide 36

Slide 36 text

Questions?

Slide 37

Slide 37 text

Thanks ☺