Protocol Labs Research
About
People
Research
Outreach
Blog
Longform
2021.6.23 / Blog
Designing a dataflow editor with TypeScript and React
This is a design report – a story about the tradeoffs and challenges that we encountered while building a medium-complexity React component in TypeScript. These include state modeling (“making illegal states unrepresentable”) basic type-level programming in TypeScript DX patterns for generically typed React components DX patterns for reusable controlled components using a Redux-like action/dispatch state paradigm These topics all deal with the external interface and TypeScript typings; lower-level implementation challenges (like optimizing drag interactions and sharing state between React and D3) have been left to a future post.