TypeScript 是一种由微软开发的开源编程语言，它是 JavaScript 的一个超集，可以编译成纯 JavaScript 代码。在前端开发中，TypeScript 提供了更强大的类型检查和代码提示，可以大大提高代码的可读性和健壮性。不过，在 TypeScript 开发中，有时会遇到 JavaScript 导入模块时的坑点，本文将详细介绍这些坑点并提供解决方案。
坑点一：导入 CommonJS 模块时需要使用 require
在 JavaScript 中，使用 CommonJS 规范导出模块时，通常使用 module.exports 或 exports，而在导入模块时，可以使用 require 函数来获取模块的导出内容。例如：
-- -------------------- ---- ------- -- ------- -------- ------ -- - ------ - - -- - -------------- - - ---- --- - -- ------- ----- ---- - ------------------ ----------------------- ---- -- -- -展开代码
在 TypeScript 中，由于其导入模块的语法是 import，因此不能直接使用 require 函数导入 CommonJS 模块。如果直接使用 import 语法导入 CommonJS 模块，会出现以下错误：
import math from './math'; // 报错：Module not found: Error: Can't resolve './math' in '...'
为了解决这个问题，需要使用 require 函数来导入 CommonJS 模块，例如：
const math = require('./math'); console.log(math.add(1, 2)); // 输出 3
坑点二：导入 ES6 模块时需要指定文件扩展名
在 JavaScript 中，使用 ES6 规范导出模块时，通常使用 export 关键字来导出模块的内容，而在导入模块时，可以使用 import 语法来获取模块的导出内容。例如：
-- -------------------- ---- ------- -- ------- ------ -------- ------ -- - ------ - - -- - -- ------- ------ - --- - ---- --------- ------------------ ---- -- -- -展开代码
在 TypeScript 中，由于其支持 ES6 模块规范，因此可以直接使用 import 语法导入 ES6 模块。不过，在导入 ES6 模块时，需要指定文件扩展名，例如：
import { add } from './math.js'; console.log(add(1, 2)); // 输出 3
坑点三：导入默认导出时需要指定 default 关键字
在 JavaScript 中，可以使用 export default 语法来导出模块的默认内容，例如：
-- -------------------- ---- ------- -- ------- ------ ------- -------- ------ -- - ------ - - -- - -- ------- ------ --- ---- --------- ------------------ ---- -- -- -展开代码
在 TypeScript 中，同样可以使用 import 语法导入默认导出的模块。不过，在导入默认导出时，需要使用 default 关键字来指定默认导出的内容，例如：
import add from './math'; console.log(add(1, 2)); // 输出 3
坑点四：导入命名空间时需要使用 import * as 语法
在 TypeScript 中，可以使用 namespace 关键字来定义命名空间，例如：
// math.ts namespace Math { export function add(a, b) { return a + b; } } export default Math;
在导入命名空间时，需要使用 import * as 语法，并指定命名空间的名称，例如：
import * as Math from './math'; console.log(Math.add(1, 2)); // 输出 3
总结
本文介绍了在 TypeScript 开发中，导入 JavaScript 模块时的一些坑点，包括导入 CommonJS 模块时需要使用 require，导入 ES6 模块时需要指定文件扩展名，导入默认导出时需要指定 default 关键字，以及导入命名空间时需要使用 import * as 语法。这些坑点可能会导致 TypeScript 的编译错误或运行时错误，因此需要开发者注意并遵循相应的规范和语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65c9894eadd4f0e0ff358e22
