Triangle.js Notes - React With Typescript
React With Typescript
with Doug Miller (meetup) (slides)
Static Typing Options For JavaScript
- TypeScript - Microsoft
- flow - Facebook
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
@typesscope on npm (preferred)- Typings
- 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
- Sample app used for talk
- Look into Aphrodite for typing CSS
- react-with-styles