Static typing with Flow and TypeScript

on YouTube ↗32m

" summary

Shows exactly how Flow and TypeScript behave with React: converts a small image‑viewer app, uses webpack and a precompile step to strip or transform JSX, and ships a working build. Demonstrates a practical react.jsx wrapper hack plus a ts-gx loader chain to satisfy TypeScript, explains why ES6 classes remove pain, and documents that mixins break inference. Catches real bugs (string vs number prop/state errors) and proves the app compiles and runs.

AI-written summary · about

" chapters (15)

1. 0:00Start
2. 0:21Static Typing
3. 2:38Flow in Typescript
4. 3:33Add Function
5. 4:16Type Annotations
6. 6:30Webpack
7. 7:45Type Script Loader
8. 8:19Typescript Does Not Understand Jsx
9. 10:44Pre Compile
10. 12:18External Modules
11. 15:30Pre Compilation
12. 24:50Errors
13. 25:17Returned Missing Annotation
14. 26:40Jsx Loader
15. 31:21References

" related talks

• 30mFlow Typing a React CodebaseForbes Lindesay · React Amsterdam 2017
• 42mStatic Type Checking with FlowTypeEdgar Marukyan · JS Conf Armenia 2017
• 57mTypeScript for React developersLenz Weber · International JavaScript Conference Munich 2019
• 58mThe Road to a Statically Typed FuturePatrick Stapfer · React Alicante 2017
• 23mFlow or how I learned to stop worrying and typecheck my React codeJeff Morrison · React Rally 2015
• 49mTypescript + ReactBen Ilegbodu · Connect.Tech 2022
• 58mFlow - Am I Your Type?Mark Volkmann · NDC Oslo 2017
• 23mTypeScript Ruined My Life (In a Good Way)Andy Mockler · Amsterdam JSNation Conference 2018