I’m working on a multilingual application with the following structure:
messages/
├── en.d.json.ts // baseline type definition
├── en.json
├── ja.json
├── zh-CN.json
└── zh-TW.json
Each file has nested keys, for example:
// en.json
{
"navbar": {
"navbar-mobile-menu": {
"dashboard": "Dashboard",
"profile": "Profile",
"logout": "Logout"
},
"navbar-user-menu": {
"login": "Login",
"dashboard": "Dashboard",
"profile": "Profile",
"logout": "Logout"
}
}
}
I want TypeScript (and my IDE) to check at compile time that:
All translation files (ja.json, zh-CN.json, zh-TW.json) have exactly the same keys as en.json.
No keys are missing and no extra keys exist.
Ideally, TypeScript should give me red squiggles in VSCode if a key is missing or spelled incorrectly.
How can I set this up in a clean and maintainable way?