为何tsc无法转译带.ts后缀的动态import？

核心原因 #

TypeScript编译器（tsc）的核心逻辑是将.ts/.tsx源文件编译为.js/.jsx运行时文件，它不允许在运行时的动态import中指定.ts后缀：

1. 动态import是运行时执行的逻辑，而.ts文件是编译前的源文件，编译完成后这些.ts文件不会出现在最终构建产物里，运行时根本找不到对应文件。
2. tsc对动态import的路径做静态分析时，若发现.ts后缀，会判定这是未编译的源文件路径，但由于你用了变量locale做动态路径，tsc无法提前验证该路径下的.ts文件是否存在，因此直接抛出转译错误。

而用.js后缀时，tsc会将其识别为编译后的目标文件路径，它能对应到源文件中同名的.ts文件，同时知道编译后会生成对应的.js文件，因此可以正常转译，最终运行时也能正确加载文件。

解决办法 #

方法1：直接在动态import中使用.js后缀 #

这是最直接的方案，完全符合你期望的构建结果：

{
  'component': locale => import(`./translations/${locale}.js`),
}

tsc编译时会保留这个.js后缀，运行时加载的就是编译后的本地化文件。

方法2：通过类型约束确保路径合法性（可选） #

如果想在编码阶段验证本地化文件的存在，可以先定义所有支持的语言枚举，再约束locale的取值，让tsc能静态检查对应的.ts文件是否存在：

// 定义支持的语言列表
type SupportedLocale = 'en' | 'zh' | 'ja';

{
  'component': (locale: SupportedLocale) => import(`./translations/${locale}.js`),
}

这样既能在编码阶段避免拼写错误，编译后也能生成正确的.js路径。

额外配置检查 #

确保你的tsconfig.json满足以下条件：

• module设置为ESNext/ES2020或以上（支持动态import语法）
• outDir正确配置，确保编译后的文件结构与源文件对应，避免路径错位

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