Description
Clear and concise description of the problem
Currently the TS auto completions show valid keys, but does not show invalid keys. Ideally invalid keys would be indicated via a TS error, whether a non-existent key or attempting to reference a nested "object" as a key. Some examples of keys that should error are included in the "Additional Context" section.
Suggested solution
Provide stricter TS typing based on the provided schema types, so that invalid keys would be prevented/warned in type checks (editor, build, etc).
Alternative
I am not sure whether this is possible or not for vue-i18n, and look forward to hearing back. As far as I recall, this is possible in react-i18next, but I am not sure about implementation comparisons.
Additional context
An example is enclosed, showing several "invalid" localization keys that would ideally be caught by a strict TS error check.
<template>
<h2>{{ t("screens.home.title") }}</h2>
<div>{{ t("screens.home.welcomeText", { name: "Anon" }) }}</div>
<!-- Should warn about invalid key -->
<div>{{ t("screens.home.fake", { name: "Anon" }) }}</div>
<!-- Should warn about invalid key (points to an "object") -->
<div>{{ t("screens.home", { name: "Anon" }) }}</div>
</template>{
"screens": {
"home": {
"title": "Sample title",
"welcomeText": "Welcome, {name}"
}
}
}The resulting t function type is listed as the following, including several non-string keys (ie. screens and screens.home are objects and therefore a invalid translation keys).
t: ComposerTranslation<"screens.home.welcomeText">(key: number | "screens" | "screens.home.title" | "screens.home.welcomeText" | "screens.home", named: Record<string, unknown>, options?: TranslateOptions<...> | undefined) => string (+8 overloads)
Validations
- Read the Contributing Guidelines
- Read the Documentation
- Check that there isn't already an issue that request the same feature to avoid creating a duplicate.