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.

The independent researchers of the AbstractionLab tackle ambitious projects with huge potential to drive breakthroughs in computing, communication, and decentralization. They are the scout ship pilots exploring the farthest reaches of the adjacent possible.

The Underlay, a Protocol Labs independent research project undertaken in conjunction with the Knowledge Futures Group at MIT, is currently looking for a Software Engineer with strong full-stack web development skills and an interest in semantic web and decentralized web technologies.