😂 of TypeScript

Review my personal trials and tribulations with TypeScript. Including my conversion to the dark side...

https://youtu.be/wLFdj915y8k?t=30m49s

Transcript

1. of TypeScript Robert Jackson
2. Bio Open Source Addict Ember Core Team
3. Bio
6. TypeScript Intro
7. TypeScript • Compile to JavaScript • Add Features to JavaScript • Optional Static Types
8. 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
9. 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
10. TypeScript Syntax - Function function add(a: number, b: number) { return a + b; }
11. TypeScript Syntax - Function function add(a: number, b: number) { return a + b; }
12. TypeScript Syntax - Interface interface Point { x: number; y: number; }
13. TypeScript Syntax - Interface interface Point { x: number; y: number; } function plot(points: Point[]) { // ...snip... }
14. TypeScript Syntax - Interface interface IPointFormatter { (point: Point): string; } function plot( points: Point[], formatter: IPointFormatter ) { // ...snip... }
15. TypeScript Syntax - Built in Types • any • void • null • undefined • never • object • unknown • boolean • number • string • Array • Tuple • Enum
16. “How is this different from CoffeeScript?” g r u m p y m e
17. TypeScript Goals
18. “Impose no runtime overhead
 on emitted programs” D e s i g n G o a l # 3
19. “Emit clean, idiomatic, recognizable 
 JavaScript code” D e s i g n G o a l # 4
20. “Align with current and future 
 ECMAScript proposals” D e s i g n G o a l # 6
21. “Use a consistent, fully erasable, 
 structural type system” D e s i g n G o a l # 9
23. “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 )
24. Syntax Discoverability interface Contact { name: string; nickname?: string; } function shout(contact: Contact) { console.log(contact.nickname!.toUpperCase()); }
25. Syntax Discoverability
26. Typings “Contributing typings to a JS project 
 is like giving the maintainers a puppy.”
28. Interface Driven Design
29. Interface Driven Design export interface click { (selector: string): Promise<void>; } export interface triggerKeyEvent { ( selector: string, eventType: 'keydown' | 'keypress' | 'keyup', keyCode: string, ): Promise<void>; }
30. Factory Function + Interface = ❤
31. Factory Function + Interface = ❤ interface IPoint { x: number; y: number; } function buildPoint(x: number, y: number): IPoint { return { x, y }; }
32. Editor Integrations
33. Editor Integrations
34. Editor Integrations
35. Editor Integrations
36. Editor Integrations
37. Migrating Tips
38. Start Simple
39. Make *.d.ts files for un-migrated *.js files
40. Avoid "just" shipping typings with your library.
41. Have empathy...
42. Conclusion
44. ❤
45. Thank you