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

Robert Jackson

July 19, 2018
Tweet

More Decks by Robert Jackson

Other Decks in Programming

Transcript

  1. of TypeScript
    Robert Jackson

    View full-size slide

  2. Bio
    Open Source Addict
    Ember Core Team

    View full-size slide

  3. TypeScript Intro

    View full-size slide

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

    View full-size slide

  5. 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

    View full-size slide

  6. 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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  14. TypeScript Goals

    View full-size slide

  15. “Impose no runtime overhead

    on emitted programs”
    D e s i g n G o a l # 3

    View full-size slide

  16. “Emit clean, idiomatic, recognizable 

    JavaScript code”
    D e s i g n G o a l # 4

    View full-size slide

  17. “Align with current and future 

    ECMAScript proposals”
    D e s i g n G o a l # 6

    View full-size slide

  18. “Use a consistent, fully erasable, 

    structural type system”
    D e s i g n G o a l # 9

    View full-size slide

  19. “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 )

    View full-size slide

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

    View full-size slide

  21. Syntax Discoverability

    View full-size slide

  22. Typings
    “Contributing typings to a JS project 

    is like giving the maintainers a puppy.”

    View full-size slide

  23. Interface Driven Design

    View full-size slide

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

    View full-size slide

  25. Factory Function + Interface = ❤

    View full-size slide

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

    View full-size slide

  27. Editor Integrations

    View full-size slide

  28. Editor Integrations

    View full-size slide

  29. Editor Integrations

    View full-size slide

  30. Editor Integrations

    View full-size slide

  31. Editor Integrations

    View full-size slide

  32. Migrating Tips

    View full-size slide

  33. Start Simple

    View full-size slide

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

    View full-size slide

  35. Avoid "just" shipping typings with your library.

    View full-size slide

  36. Have empathy...

    View full-size slide