Typing Beyond Code: Contracts Between Layers

At some point, we stopped seeing the frontend as just a collection of components and started treating it as a system of layers and contracts between them. That led us to the idea of typing not only the code itself, but also the boundaries between layers — everything that affects the stability and scalability of the application.

In this talk, I’ll share practices we’ve already applied in production. We’ll go through a typed routing model with parameter inference, safe export of design tokens and icons from Figma, verifiable CSS Modules and CSS Variables, typed i18next, ENV configs, feature toggles, as well as API and MobX as the central application layer. We’ll also look at what happens when the amount of typed information grows too large: when compilation and linting start to “break down” and which engineering techniques help keep the system operational.

Some of these tasks are supported by TypeScript out of the box, but in many cases we had to write custom scripts, extend library typings, and introduce additional tooling.

I’ll cover not only what worked, but also experiments that failed.

This is not a set of abstract recommendations but a practical engineering approach to typing cross-layer contracts in a frontend application — where not only correctness but also overall system performance truly matters.