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

  2. 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
  3. 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
  4. TypeScript Syntax - Interface interface Point { x: number; y:

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

    } function plot( points: Point[], formatter: IPointFormatter ) { // ...snip... }
  6. TypeScript Syntax - Built in Types • any • void

    • null • undefined • never • object • unknown • boolean • number • string • Array • Tuple • Enum
  7. “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 )
  8. Syntax Discoverability interface Contact { name: string; nickname?: string; }

    function shout(contact: Contact) { console.log(contact.nickname!.toUpperCase()); }
  9. Interface Driven Design export interface click { (selector: string): Promise<void>;

    } export interface triggerKeyEvent { ( selector: string, eventType: 'keydown' | 'keypress' | 'keyup', keyCode: string, ): Promise<void>; }
  10. Factory Function + Interface = ❤ interface IPoint { x:

    number; y: number; } function buildPoint(x: number, y: number): IPoint { return { x, y }; }