TypeScript 与模块系统

在 TypeScript 中，模块系统用于将代码拆分为多个文件，并通过导入和导出语法进行交互。TypeScript 支持多种模块规范，最常见的是 ES 模块和 CommonJS 模块。通过模块化开发，代码结构更加清晰，管理更加方便。

ES 模块与 CommonJS

ES 模块（ESM）

ES 模块是现代 JavaScript 标准的一部分，支持 import 和 export 语法。TypeScript 完全支持 ES 模块的语法。

导出

// math.ts
export function add(x: number, y: number): number {
  return x + y;
}

导入

// app.ts
import { add } from "./math";

console.log(add(2, 3));

TypeScript 会根据 tsconfig.json 配置的模块解析选项来处理模块。默认情况下，TypeScript 使用 ES 模块。

CommonJS 模块

CommonJS 模块通常用于 Node.js 项目中，使用 module.exports 和 require 语法。虽然 TypeScript 支持 CommonJS，但我们更推荐使用 ES 模块。

导出

// math.js
exports.add = function (x, y) {
  return x + y;
};

导入

// app.js
const math = require("./math");

console.log(math.add(2, 3));

TypeScript 可以通过 module 配置来处理 CommonJS 模块。

类型声明文件（.d.ts）

类型声明文件用于为 JavaScript 库和模块提供类型定义。TypeScript 项目中，可以使用 .d.ts 文件来声明外部模块的类型，确保代码的类型安全。

示例：为 JavaScript 模块添加类型声明

假设我们有一个没有类型定义的 JavaScript 模块，使用 .d.ts 文件提供类型支持。

// utils.d.ts
declare module "utils" {
  export function sum(a: number, b: number): number;
  export function multiply(a: number, b: number): number;
}

使用第三方库的类型定义

很多流行的 JavaScript 库（如 jQuery、Lodash 等）都提供了 TypeScript 类型声明。你可以通过 @types 包来安装这些类型定义。

npm install --save-dev @types/lodash

安装后，TypeScript 会自动使用对应的类型声明文件。

第三方库的类型：@types 和 DefinitelyTyped

在 TypeScript 中，第三方 JavaScript 库的类型声明文件通常存储在 DefinitelyTyped 仓库中。你可以通过 npm 安装类型声明，通常使用 @types 前缀。

例如，安装 Lodash 的类型声明文件：

npm install --save-dev @types/lodash

通过这种方式，你可以为常用的 JavaScript 库提供强大的类型支持。

模块解析与路径别名

通过 TypeScript 配置文件（tsconfig.json）中的 baseUrl 和 paths 属性，可以为模块设置路径别名，使得导入模块时更加简洁和易读。

示例：路径别名配置

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "@utils/*": ["utils/*"]
    }
  }
}

使用路径别名

import { add } from "@utils/math";

通过设置路径别名，你可以避免复杂的相对路径，使得代码结构更加清晰。