如何从next-i18next配置的locales数组自动推断类型？

问题背景 #

在使用next-i18next开发多语言项目时，当前在topics.tsx中通过locale as "en" | "fr"手动断言类型，希望能从next-i18next.config.js的locales数组中自动推断出"en" | "fr"联合类型，避免手动指定。

可行解决方案 #

完全可以实现，核心思路是通过TypeScript的字面量类型推断，从配置文件中提取Locale类型，步骤如下：

1. 将配置文件改为TypeScript格式

把next-i18next.config.js重命名为next-i18next.config.ts，并使用as const锁定locales数组的字面量类型，确保TypeScript能精确推断出每个元素的具体值：

export const nextI18NextConfig = {
  i18n: {
    defaultLocale: "fr",
    locales: ["en", "fr"] as const, // 锁定为字面量数组类型
    reloadOnPrerender: process.env.NODE_ENV === "development",
  },
}

module.exports = nextI18NextConfig

2. 定义Locale联合类型

在配置文件中添加类型声明，从locales数组中提取元素的联合类型：

// 从配置的locales数组中自动推断Locale类型
export type Locale = typeof nextI18NextConfig.i18n.locales[number];

3. 在组件中使用自动推断的Locale类型

修改topics.tsx，导入配置文件中的Locale类型，替换手动断言的部分：

…
import { nextI18NextConfig, Locale } from "./next-i18next.config.ts"
import topics from "./topics.json"

export default () => {
  const { locale } = useRouter()
  const { t } = useTranslation("common")
  const localizedTopics: string[] = []
  for (const [slug, topic] of Object.entries(topics)) {
    // 使用自动推断的Locale类型代替手动指定的联合类型
    localizedTopics.push(topic[locale as Locale].name)
  }
  …
}

4. 进阶优化：自动匹配Router的locale类型

如果想彻底消除手动断言，可以扩展Next.js的Router类型，让locale默认就是我们定义的Locale类型。在项目根目录创建types/next.d.ts文件：

import type { Locale } from "../next-i18next.config";

declare module "next/router" {
  interface NextRouter {
    locale: Locale;
  }
}

之后在组件中使用locale时就无需手动断言，TypeScript会自动识别其类型为"en" | "fr"。

注意事项 #

• 确保项目已配置TypeScript环境，tsconfig.json的相关配置正确。
• 如果需要保持配置文件为JS格式，也可以单独创建一个types/locale.ts文件，手动导出Locale类型并关联配置，但改用TS配置文件的方式更简洁且能自动同步配置变更。

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