How I Made Missing Translations a Compile-Time TypeScript Error

Most React i18n libraries catch missing translations at runtime, which means users see broken UI before you do. I wanted TypeScript to catch them before the code ships. Here's how react-scoped-i18n does it. The standard approach and its failure mode With key-based libraries like react-i18next , you write something like this: const { t } = useTranslation (); return < Heading > { t ( " welcome.message " ) } </ Heading >; Then in your JSON files: // en.json { "welcome" : { "message" : "Welcome back!" } } // es.json { "welcome" : {} } // oops - forgot this one TypeScript has no idea that "welcome.message" is missing from es.json . Your Spanish users get a raw key string rendered in the UI, and it only surfaces when someone actually switches the language. Some libraries offer codegen to produce typed key maps, but that's a build step you have to maintain, and the type safety only covers key existence - not the actual content. The core idea: translations exist in your components (as code) In