React With Typescript

with Doug Miller (meetup) (slides)

Static Typing Options For JavaScript

Advantages And Disadvantages

pros

  • better tooling
  • find errors earlier
  • ramp up new team members faster
  • refactor without anxiety
  • faster development time

cons

  • project setup is more tedious
  • typings certain flows can be painful
  • additional build time
  • testing can be slower

Stack

  • TypeScript - static type checking for JavaScript
  • React - component-oriented view library
  • webpack - bundle app into manageable chucks for the browser
  • Jest - automocking (optional) test library
  • Enzyme - shallow render React DOM nodes for testing

Managing Type Definitions

  1. @types scope on npm (preferred)
  2. Typings
  3. manually copy from DefinitelyTyped

All React Typescript files must both:

  • have extension .tsx
  • assign React library to React

Jest

  • automocking (no longer the default)
  • parallel test running
  • sandbox each test
  • automatic global state reset per test

Enzyme

  • wraps react testing
  • shallow render components
  • simulate click events and other lifecycle methods

Resources