TypeScript中如何对动态导入的模块进行正确类型标注？

TypeScript 静态类型检查运行在编译阶段，无法识别带变量拼接的动态导入路径对应的具体模块，所以这类导入默认会被推导为 any，不存在自动推导这类动态路径类型的原生能力，你可以通过以下几种方案实现正确的类型提示：

方案1：显式联合类型约束（适配现有代码结构，推荐） #

仅导入各语言包的类型（不会产生额外运行时代码），将所有可能的枚举类型合并为联合类型，对动态导入的结果做类型断言即可：

// 仅导入类型，不引入运行时代码
import type * as KrFoo from '@project/kr/foo'
import type * as EnFoo from '@project/en/foo'

// 合并所有语言下foo的类型为联合类型
type LocalizedFoo = typeof KrFoo.foo | typeof EnFoo.foo

// 对动态导入结果做类型断言
const { foo } = require(`@project/${process.env.LOCALE}/foo`) as {
  foo: LocalizedFoo
}

interface bar {
  foo: LocalizedFoo
}

后续新增语言包时，只需要在LocalizedFoo类型中追加对应模块的foo类型即可，所有使用位置的类型提示会自动更新。

方案2：通配符模块声明（适合多语言模块结构完全统一的场景） #

如果所有语言目录下的foo模块结构完全一致，可以通过通配符模块声明统一给这类动态路径的模块补类型，不需要每次都导入各语言包类型：

// 可以放在项目全局的d.ts类型声明文件中
declare module '@project/*/foo' {
  export enum foo {
    KIMCHI = 'kimchi',
    JOKBAL = 'jokbal',
    CHEESE = 'cheese',
    PIZZA = 'pizza'
  }
}

声明完成后，你原来的动态导入代码就可以自动获得类型提示，不需要额外修改业务逻辑。

方案3：Next.js 标准动态导入写法适配 #

如果你使用Next.js的ES模块标准动态导入，可以配合泛型约束实现类型标注：

// 先约束可用的语言枚举
type Locale = 'kr' | 'en'

const loadFooByLocale = async (locale: Locale) => {
  const res = await import(`@project/${locale}/foo`)
  return res as { foo: typeof import(`@project/${Locale}/foo`)['foo'] }
}

注意：所有带运行时变量的动态路径导入，都需要手动补充类型约束，这是TypeScript静态分析的设计边界，没有配置项可以开启自动推导。

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