如何在TypeScript中使用模块化及注意事项

TypeScript中ES6模块化的标准写法

TypeScript全面支持ES6（ES2015）的模块化标准，通过 export 导出和 import 导入来组织代码。这种写法不仅结构清晰，还能充分发挥TS的智能提示优势。

第1步：定义与导出模块

在一个单独的文件中定义需要导出的变量或函数。例如创建一个 myModule.ts：

// myModule.ts
export const name: number = 123;
export const getUser = (user: string): void => {
  console.log(user);
};

第2步：引入并使用模块

在主文件（如 index.ts）中按需引入：

// index.ts
import { name, getUser } from "./myModule";
getUser(name);

使用ES6标准导出的变量，编辑器能提供精准的智能提示。当未引入直接使用变量名时，IDE通常会提示从哪里引入；输入变量名后直接按 Enter 键即可自动补全引入语句。

上述过程体现了良好的开发体验，但需注意以下细节：

ES6模块化的注意事项

• 智能提示的条件限制：智能推导主要适用于具名导出（export），对默认导出（export default）的效果较差。这是因为 export 有固定名称，而 export default 允许任意起别名，编译器无法猜测具体意图。
• 引入文件的后缀：在 import 语句中引用文件名时，不要带上 .ts 后缀。因为最终编译生成的是 .js 文件，若保留 .ts 会导致模块解析失败。

TypeScript中的CommonJS兼容性写法

在一些遗留项目或特定场景下，我们可能需要使用CommonJS规范。在纯CommonJS模式下：

// 导出
module.exports = {
  sum(a: number, b: number) {
    return a + b;
  }
};

// 引入
const mymodule = require('./xxx');

此时，mymodule 的类型会被推断为 any，导致丧失TS核心的类型检查能力。

为了在TS中保持完整的类型检查，同时输出与上述一致的编译结果，推荐使用“TS特有的引入方式”：

// 导出
exports = {
  sum(a: number, b: number) {
    return a + b;
  }
};

// 引入
import mymodule = require('./xxx');

尽管可以这样混合使用，但由于ES6是主流且未来的演进方向，除非必要，否则建议优先采用ES6标准。

解决引入第三方模块的编译报错

在使用TypeScript引入类似Node.js的内置模块（如 fs）时，经常会遇到编译报错。例如尝试直接导入：

import fs from "fs";
fs.readFileSync('./');

当 tsconfig.json 设置 module: CommonJs 时，编译结果通常如下：

var fs_1 = require("fs");
fs_1["default"].readFileSync('./');

问题在于：Node.js的原生模块使用的是 module.exports，并不包含 default 属性。因此代码会在运行时找不到该属性从而报错。

为什么会出现这个问题？

这是因为 fs 并非遵循ES Modules规范的导出形式。TS将其视作标准的ESM引入（带有 default），但在运行环境（CommonJS）中，该属性为空。

解决方案

方案1：解构方式引入（推荐）

直接引入我们需要的方法，避免访问 default 属性：

import { readFileSync } from "fs";
readFileSync('./');

编译结果：

(0, fs_1.readFileSync)('./');

方案2：使用通配符导入

将整个模块作为一个对象导入：

import * as fs from "fs";
fs.readFileSync('./');

编译结果：

var fs = require("fs");
fs.readFileSync('./');

方案3：配置 esModuleInterop

在 tsconfig.json 中开启互操作支持，使TS能自动处理不同导出形式的差异：

{
  "compilerOptions": {
    "esModuleInterop": true
  }
}

开启后，之前的直接引入方式便不再报错。TS会自动生成一个辅助函数 __importDefault，确保即使不是ESM形式导出的模块也能正确赋予 default 属性。

关于TypeScript命名空间的补充说明

TypeScript早期提供了一种称为 命名空间（namespaces） 的内部模块格式。虽然它并未被废弃，且在编写复杂的 @types 定义文件时仍可见其踪迹，但其大部分功能已被现代的 ES Modules 所覆盖。

随着JavaScript社区向ESM统一，官方建议在编写应用代码时优先使用 export/import，以保持与现代生态的一致性。

总结

以上就是TypeScript使用模块化以及注意事项的详细内容，更多关于TypeScript模块化开发的资料请关注本站其它相关文章！