react-i18Next:对转换键值使用枚举

Question

我们在React项目中使用i18Text，我想知道是否有办法在这样使用翻译文件的键时使用枚举来避免拼写错误：

export enum AppLocaleKey {
test = 'test'
}
...
import translationEN from './locales/en/translation';
const resources = {
en: { translation: translationEN },
...
};
i18n
.use(initReactI18next)
.init({
resources,
...
})
...
const translation = {
[AppLocaleKey.test]: 'Test...',
};
export default translation;
...
import { AppLocaleKey } from './locales/localeKeys';
import { useTranslation } from 'react-i18next';
const App = (props: Props) => {
const { t, i18n } = useTranslation();
return (
<>
<p>{t(AppLocaleKey.test)}</p>
<>
)
}

但这并没有奏效。你知道类似的方法吗？

Answer 1

如果您使用TS，您可以使用ts4.1将json的所有键声明为有效输入。

查看官方示例

并以此为榜样。

Answer 2

我相信这就是您想要的

export enum VisitorType {
SCHOOL_VS,
SCHOOL_NOT_VS,
GROUP,
PRIVATE
}

resources: {
en: {
translation: {
visitorType: {
[VisitorType.SCHOOL_VS]: 'State school',
[VisitorType.SCHOOL_NOT_VS]: 'Non state school',
[VisitorType.GROUP]: 'Private groups',
[VisitorType.PRIVATE]: 'Private'
},
}
},

t(`visitorType.${VisitorType.SCHOOL_VS}`)