React-i18next 与 TypeScript 结合使用时，补全 key 值提示的解决方案

2023-11-14 09:20:24

react-i18next 搭配 TypeScript 缺少 key 值提示的补充

在使用 react-i18next 搭配 TypeScript 时，你会发现当使用 t 函数传入 key 时，没有智能提示。这可能会导致意外错误，因为如果传入了一个不存在的 key，也不会报错。

解决方案

我们可以使用 react-i18next 和 i18next-typescript-utils 包来解决这个问题。

首先，在项目中安装这两个包：

npm install react-i18next i18next-typescript-utils --save

然后，在 TypeScript 配置文件中添加以下内容：

// tsconfig.json
{
  "compilerOptions": {
    "types": [
      "react-i18next",
      "i18next-typescript-utils"
    ]
  }
}

最后，在你的 TypeScript 代码中使用 useTranslation 钩子，如下所示：

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      {t('key')}
    </div>
  );
};

现在，当你在编辑器中输入 t('key') 时，你会看到智能提示，它会列出所有可用的 key。这将帮助你避免传入不存在的 key，并提高代码的准确性。

示例

以下是如何使用此解决方案解决你给出的示例中提到的问题的：

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
  const { t } = useTranslation();

  return (
    <div>
      {t('my.key')}
    </div>
  );
};