Statically Enforcing A Consistent UI Using Type Systems

Types catch issues such as null values and incompatible data, reducing the mental load on authors and reviewers. They also document function inputs and outputs, flag breaking changes at call sites, and help IDEs offer useful suggestions.

Brown defines an invariant as a property a program should always preserve, such as a list never being empty. He uses a Flow opaque type to hide a nonempty list’s pair-based representation, so users of the type cannot alter it in ways that break that guarantee.

React component props are one place to enforce UI rules. Brown’s example replaces an unrestricted color string with a set of approved colors, so an off-theme value produces a type error.

A component’s return type can restrict what it renders, while a menu’s children can be limited to menu items and separators. Brown then relaxes the rule to allow wrapper components that recursively render those approved elements, such as a disabled menu item.

Brown recaps that types can make interfaces more consistent as well as catch bugs. He says Flow and TypeScript can both be adopted gradually in large codebases, and recommends researching which fits a team’s needs.