A common pitfall in TypeScript codebases is maintaining manual union types alongside runtime objects, causing them to drift out of sync. The 'linked typing' pattern solves this by using `keyof typeof` to derive types directly from runtime objects. Combined with `as const`, this ensures a single source of truth: adding or removing keys from the object automatically updates the type. The pattern is demonstrated with React component variant maps, configuration objects, and error code maps, enabling compile-time safety without redundant type declarations.

3m read timeFrom typescript.tv
Post cover image
Table of contents
ContentsThe Problem: Manual Union TypesThe Fix: keyof typeofUsing It in Component PropsBeyond Component Variants

Sort: