Tweet
Tweet

Slide 1

Slide 1 text

of TypeScript Robert Jackson

Slide 2

Slide 2 text

Bio Open Source Addict Ember Core Team

Slide 3

Slide 3 text

Bio

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

TypeScript Intro

Slide 7

Slide 7 text

TypeScript • Compile to JavaScript • Add Features to JavaScript • Optional Static Types

Slide 8

Slide 8 text

class Person { first: string; last: string; constructor(first, last) { this.first = first; this.last = last; } get name() { return `${this.first} ${this.last}`; } } TypeScript Syntax - Class

Slide 9

Slide 9 text

class Person { first: string; last: string; constructor(first, last) { this.first = first; this.last = last; } get name() { return `${this.first} ${this.last}`; } } TypeScript Syntax - Class

Slide 10

Slide 10 text

TypeScript Syntax - Function function add(a: number, b: number) { return a + b; }

Slide 11

Slide 11 text

TypeScript Syntax - Function function add(a: number, b: number) { return a + b; }

Slide 12

Slide 12 text

TypeScript Syntax - Interface interface Point { x: number; y: number; }

Slide 13

Slide 13 text

TypeScript Syntax - Interface interface Point { x: number; y: number; } function plot(points: Point[]) { // ...snip... }

Slide 14

Slide 14 text

TypeScript Syntax - Interface interface IPointFormatter { (point: Point): string; } function plot( points: Point[], formatter: IPointFormatter ) { // ...snip... }

Slide 15

Slide 15 text

TypeScript Syntax - Built in Types • any • void • null • undefined • never • object • unknown • boolean • number • string • Array • Tuple • Enum

Slide 16

Slide 16 text

“How is this different from CoffeeScript?” g r u m p y m e

Slide 17

Slide 17 text

TypeScript Goals

Slide 18

Slide 18 text

“Impose no runtime overhead
 on emitted programs” D e s i g n G o a l # 3

Slide 19

Slide 19 text

“Emit clean, idiomatic, recognizable 
 JavaScript code” D e s i g n G o a l # 4

Slide 20

Slide 20 text

“Align with current and future 
 ECMAScript proposals” D e s i g n G o a l # 6

Slide 21

Slide 21 text

“Use a consistent, fully erasable, 
 structural type system” D e s i g n G o a l # 9

Slide 22

Slide 22 text

No content

Slide 23

Slide 23 text

“We're not going to take a major version bump because there was a bug in the compiler where it failed to identify early errors, even though that's technically a breaking change” R ya n C a va n a u g h ( M i c r o s o f t / Ty p eS c r i p t # 1 4 1 1 6 )

Slide 24

Slide 24 text

Syntax Discoverability interface Contact { name: string; nickname?: string; } function shout(contact: Contact) { console.log(contact.nickname!.toUpperCase()); }

Slide 25

Slide 25 text

Syntax Discoverability

Slide 26

Slide 26 text

Typings “Contributing typings to a JS project 
 is like giving the maintainers a puppy.”

Slide 27

Slide 27 text

No content

Slide 28

Slide 28 text

Interface Driven Design

Slide 29

Slide 29 text

Interface Driven Design export interface click { (selector: string): Promise; } export interface triggerKeyEvent { ( selector: string, eventType: 'keydown' | 'keypress' | 'keyup', keyCode: string, ): Promise; }

Slide 30

Slide 30 text

Factory Function + Interface = ❤

Slide 31

Slide 31 text

Factory Function + Interface = ❤ interface IPoint { x: number; y: number; } function buildPoint(x: number, y: number): IPoint { return { x, y }; }

Slide 32

Slide 32 text

Editor Integrations

Slide 33

Slide 33 text

Editor Integrations

Slide 34

Slide 34 text

Editor Integrations

Slide 35

Slide 35 text

Editor Integrations

Slide 36

Slide 36 text

Editor Integrations

Slide 37

Slide 37 text

Migrating Tips

Slide 38

Slide 38 text

Start Simple

Slide 39

Slide 39 text

Make *.d.ts files for un-migrated *.js files

Slide 40

Slide 40 text

Avoid "just" shipping typings with your library.

Slide 41

Slide 41 text

Have empathy...

Slide 42

Slide 42 text

Conclusion

Slide 43

Slide 43 text

No content

Slide 44

Slide 44 text

❤

Slide 45

Slide 45 text

Thank you