Triangle.js Notes - React With Typescript

React With Typescript

with Doug Miller (meetup) (slides)

Static Typing Options For JavaScript

Advantages And Disadvantages


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


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


  • 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


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


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