My notes from the TypeScript workshop at EmberConf 2018

typescript-in-an-ember-app.md

Workshop Notes

TypeScript

• Basically TypeScript is a superset of JavaScript, with static Type analysis

• 3 big developer experiences / differentiators...

  1. Always up to date docs for functions and classes
  2. Fewer undefined is not... an object/function errors
  3. Refactoring is way easier one your application is typed

• It is not painful to use!

• TypeScript does infer types, let, return, Object, Array

• any is the great and terrible escape hatch

• What do I do with TypeScript?

• Define your own type (aliases), interface, and class definitions to describe shape of data

  1. Type: name your shape (no extend, implements)
  2. Interface: extensible shape using extends
  3. Class: use implements and/or extend for both shape and behavior (methods)

• Start with type aliases as a default, can be union or intersection types

• Use interface when many classes implement

• Define a class when you need shape of data and a constructor

• TypeScript is a structural type system -> just concerned with "shapes" of data

• null and undefined are accounted for with "optional" notation prop?: string

• Turn on strict null checking

• Use generics, e.g. (arg: T) => T, Array<T>

  • interface Identity<T> { (arg: T): T; },
  • function identity<T>(arg: T): T { return arg; },
  • let num: Identity<number> = identity;

• Union Types number | string | boolean

• Discriminated Union types type Shape = Square | Rectangle | Circle;, all three interfaces have a kind property (can switch on that prop)

• Literal types 'active',

• Enum enum Shapes { Circle, Rectangle, Square, },

• Intersection types Person & Serializable & Loggable

• TS v 2.9

Ember

• constructor(attrs) { super(attrs) } replaces init
• Use class (static) + instance properties (assigned after super call)
• Prototype problems: use Decorators, @tagName('ul') cheat-sheet
• Favor new style class declaration vs EmberObject.extend|create
• Services use a type registry to declare module interface
• Ember Data: use class and extends DS.Model with decorators
• Mirage factories, use extends no decorators, use registries (e.g. using Ember Data)
• .hbs types? someone has been working on that (e.g. JSX w/ TS)
• Start with what's used most and has least dependendencies, or isolated feature