react-i18Next：使用枚举作为翻译键值

Question

我们在 React 项目中使用 i18Next，我想知道是否有办法使用枚举作为翻译文件的键，以避免在使用时出现拼写错误：

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 的所有键声明为有效输入。

查看 official example、

还有working example出来的。

react-i18Next：使用枚举作为翻译键值

react-i18Next: Using an enum for translation key values

enums

internationalization

i18next

reactjs

react-i18next