TypeScript模块导入失败求助：无法导入自定义模块A

你遇到的核心问题是浏览器的ES模块系统要求导入路径必须包含完整的文件扩展名，而TypeScript 3.0在编译ES模块时，默认不会给import语句添加.js后缀，导致浏览器请求了不存在的/Scripts/app/a路径（实际存在的是a.js）。下面是针对你的场景的具体解决方案：

步骤1：修正TypeScript导入语句 #

修改模块B的代码，在导入路径中添加.js后缀：

// b.ts
import { A } from "./a.js"; 
let a = new A.A_Class();

虽然TypeScript可能会暂时提示找不到模块，我们下一步会通过配置解决这个问题。

步骤2：调整tsconfig.json配置 #

更新你的tsconfig.json，优化模块解析和编译行为：

{
  "compilerOptions": {
    "target": "es6", // 改用更稳定的ES6目标，和浏览器ES模块兼容性更好
    "module": "es6",
    "moduleResolution": "node", // 按照Node.js的模块解析规则处理
    "noImplicitAny": true,
    "removeComments": true,
    "preserveConstEnums": true,
    "sourceMap": true,
    "allowJs": true // 允许TypeScript识别JS文件，解决导入.js后缀的类型提示问题
  },
  "compileOnSave": true,
  "files": [
    "a.ts",
    "b.ts" // 去掉末尾多余的逗号，避免JSON解析问题
  ]
}

关键配置说明： #

• moduleResolution: "node"：让TypeScript按照Node.js的方式查找模块，支持带后缀的导入路径。
• allowJs: true：告诉TypeScript可以解析.js文件，消除导入.js后缀时的类型错误提示。
• 改用es6作为target和module：TypeScript 3.0的esnext可能包含一些浏览器尚未支持的语法，es6更稳妥。

步骤3：验证文件路径与静态文件服务 #

1. 确认编译后的a.js和b.js都生成在Scripts/app目录下。
2. 在浏览器中直接访问http://localhost:64518/Scripts/app/a.js，确保能正常打开文件（如果访问失败，说明ASP.NET的静态文件服务没有正确配置，需要确保Scripts目录被设置为可访问的静态资源目录）。

额外排查点 #

如果你之前尝试过CommonJS模块：浏览器原生不支持CommonJS的require语法，所以必须使用type="module"的ES模块方案，这部分你当前的CSHTML配置是正确的（<script type="module" src="~/Scripts/app/b.js"></script>）。

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