TypeScript动态导入模块时如何解决找不到对应类型声明的编译报错

问题原因 #

TypeScript 编译阶段会全量检查所有代码路径的模块导入有效性，不会区分运行时的生产/开发分支逻辑，只要代码中出现的导入路径实际不存在，就会抛出找不到模块的报错。

解决方案 #

方案1：添加缺失模块的类型声明（最稳妥） #

你已经配置了typeRoots: ["./src/types"]，直接在该目录下新建locales.d.ts文件，写入以下声明即可：

// src/types/locales.d.ts
declare module './locales/en-US/translation.json' {
  // 可根据实际翻译的结构调整类型，这里用通用的键值对类型
  const translations: Record<string, string | Record<string, string>>;
  export default translations;
}

这个方案会明确告知TypeScript该路径模块的类型，不管文件实际是否存在都不会触发编译报错，生产环境文件真实存在时也能正常匹配类型。

方案2：单行忽略TS检查（最简单） #

直接在报错的导入行上方添加@ts-expect-error注释即可：

// @ts-expect-error 开发环境无本地翻译文件，仅生产环境会执行该路径逻辑
const en = await import('./locales/en-US/translation.json')

@ts-expect-error比@ts-ignore更安全，如果后续该路径真的出现类型问题，TS会主动抛出错误提醒你修改。

方案3：添加开发环境占位文件（无hack逻辑） #

在开发环境也创建对应路径的./locales/en-US/translation.json文件，写入空对象{}即可，生产环境发布时再用正式的翻译文件覆盖即可，TS能找到文件自然不会报错。

额外注意点 #

你已经开启了resolveJsonModule配置，动态导入JSON的返回值会挂载在default属性下，你当前代码直接使用en会导致运行时翻译内容加载失败，需要调整为：

const { default: en } = await import('./locales/en-US/translation.json')

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