Upgrade to Pro — share decks privately, control downloads, hide ads and more …

😂 of TypeScript

😂 of TypeScript

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

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

0dfd10ad198ae5a87640da046a77a90a?s=128

Robert Jackson

July 19, 2018
Tweet

Transcript

  1. of TypeScript Robert Jackson

  2. Bio Open Source Addict Ember Core Team

  3. Bio

  4. None
  5. None
  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
  22. None
  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.”
  27. None
  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

  43. None
  44. Thank you