TypeScript跨文件导入函数时浏览器报错的解决问询

核心原因 #

浏览器默认将脚本视为传统非模块代码，需要明确声明模块类型，同时确保TypeScript编译产物为ES模块格式，且导入路径符合浏览器规则。

分步解决方案 #

1. 给HTML中的脚本标签添加type="module" #

这是最容易遗漏的关键步骤，浏览器只有看到这个属性才会用ES模块规则解析脚本：

<!-- 替换原来的<script>标签 -->
<script type="module" src="./index.js"></script>
<!-- 如果设置了outDir将编译产物放到dist目录，就写 -->
<script type="module" src="./dist/index.js"></script>

2. 调整TypeScript编译配置（tsconfig.json） #

确保编译产物是浏览器兼容的ES模块，补充必要配置：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ES2020",
    "moduleResolution": "node", // 确保模块解析规则符合浏览器/Node的ES模块规范
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true,
    "outDir": "./dist" // 可选，将编译产物统一放到dist目录，便于管理
  },
  "include": ["./*.ts"] // 根据你的TS文件位置调整，比如src目录就写"src/**/*"
}

3. 修正导入路径的后缀 #

浏览器ES模块要求导入必须带完整文件后缀（.js），所以在index.ts中修改导入语句：

// 原来的写法
// import {isInputValid, receiveExchangeValueFromAPI, convertCurrency} from "./functions";

// 修改为带.js后缀
import {isInputValid, receiveExchangeValueFromAPI, convertCurrency} from "./functions.js";

注意：这里写的是.js而不是.ts，因为TypeScript编译后会生成.js文件，浏览器实际加载的是编译后的产物。

4. 兼容Jest测试（针对你的测试配置） #

因为你使用了Jest+ts-jest，而Jest默认使用CommonJS，需要调整Jest配置来支持ES模块：
在项目根目录创建jest.config.js：

/** @type {import('ts-jest').JestConfigWithTsJest} */
module.exports = {
  preset: 'ts-jest',
  testEnvironment: 'jest-environment-jsdom',
  extensionsToTreatAsEsm: ['.ts'],
  moduleNameMapper: {
    '^(\\.{1,2}/.*)\\.js$': '$1', // 映射导入中的.js后缀到对应的.ts文件
  },
};

验证步骤 #

1. 执行npx tsc重新编译
2. 打开HTML文件，查看控制台是否还有错误
3. 运行npm test确保测试依然正常工作

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