如何让react-18next的t()返回string解决TypeScript类型报错问题

报错原因 #

这个TypeScript报错是react-i18next默认开启的翻译key强类型校验导致的，框架会校验传入t函数的key是否匹配你预定义的翻译资源类型，未正确配置翻译类型时就会触发类型不兼容提示。

解决方法 #

• 临时快速修复

  不需要修改类型配置的场景下，可以直接对值做类型断言：

  // 断言t函数返回值为string
  <Box msg={t("common.message") as string} />
  // 或者断言key为const类型，适配类型推导
  <Box msg={t("common.message" as const)} />
  

• 推荐方案：配置全局翻译类型

  配置后不仅不会报错，还能获得翻译key自动补全、错误key提示的能力：
  1. 先定义翻译资源的类型文件（比如src/i18n/type.ts），和你实际的翻译文件结构对齐：

  export interface TranslationResources {
    common: {
      message: string;
      // 其他所有翻译key按层级补全即可
    }
    // 其他翻译命名空间也按结构声明
  }
  

  2. 新建类型声明文件src/react-i18next.d.ts，覆盖react-i18next的默认类型：

  import 'react-i18next';
  import type { TranslationResources } from './i18n/type';
  
  declare module 'react-i18next' {
    interface CustomTypeOptions {
      resources: TranslationResources;
      returnNull: false; // 配置t函数永远不会返回null，返回值自动推导为string
    }
  }
  

• 关闭翻译key强校验（不推荐）

  不需要类型校验的场景可以直接关闭校验逻辑，任意字符串都可以作为t函数的入参：
  在tsconfig.json的compilerOptions中添加配置：

  {
    "compilerOptions": {
      "types": ["react-i18next/globals.d.ts"]
    }
  }
  

内容的提问来源于stack exchange，提问作者1110