TypeScript模块

栏目： typescript 发布时间：2024-11-01

在typescript中，模块（Modules）是一种将代码分割成可重用块的方式。它们有助于组织代码、避免命名冲突，并允许代码在多个文件中进行拆分和共享。TypeScript中的模块遵循ES6模块规范，但也提供了一些额外的特性。

1. 定义模块

在TypeScript中，你可以使用export关键字来导出模块成员（变量、函数、类、接口等），以便它们可以在其他模块中被导入和使用。同样地，你可以使用import关键字来导入其他模块中导出的成员。

导出单个成员

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

导出多个成员

// shapes.ts
export class Circle {
    constructor(public radius: number) {}
    getArea(): number {
        return Math.PI * this.radius ** 2;
    }
}

export class Square {
    constructor(public side: number) {}
    getArea(): number {
        return this.side ** 2;
    }
}

导出所有成员

使用export *可以从另一个模块中导出所有成员。但是，这通常不推荐使用，因为它可能导致命名冲突和代码难以维护。

// all-exports.ts
export * from './math';
export * from './shapes';

默认导出

每个模块可以有一个默认导出，这通常是一个类或函数。默认导出在导入时不需要使用花括号。

// my-function.ts
export default function greet(name: string): string {
    return `Hello, ${name}!`;
}

2. 导入模块

导入单个成员

// main.ts
import { add } from './math';

console.log(add(2, 3)); // 输出: 5

导入多个成员

// main.ts
import { Circle, Square } from './shapes';

let c = new Circle(10);
console.log(c.getArea()); // 输出: 314.159...

let s = new Square(5);
console.log(s.getArea()); // 输出: 25

导入默认导出

// main.ts
import greet from './my-function';

console.log(greet('Alice')); // 输出: Hello, Alice!

导入并重命名

有时你可能想要导入一个模块成员，但希望给它一个不同的名字。你可以使用as关键字来实现这一点。

// main.ts
import { add as sum } from './math';

console.log(sum(2, 3)); // 输出: 5

导入整个模块

如果你想导入整个模块，并给它一个别名，你可以这样做：

// main.ts
import * as math from './math';

console.log(math.add(2, 3)); // 输出: 5

3. 模块解析

TypeScript使用Node.js风格的模块解析策略来查找模块文件。这意味着，当你导入一个模块时，TypeScript会按照一系列规则来查找对应的.ts、.tsx、.d.ts或.js文件。

非相对模块导入：对于非相对路径的模块导入（例如import express from 'express'），TypeScript会查找node_modules目录中的包。
相对模块导入：对于相对路径的模块导入（例如import { add } from './math'），TypeScript会根据当前文件的位置来查找对应的文件。

4. 配置tsconfig.json

为了编译TypeScript代码，你需要一个tsconfig.json配置文件。这个文件告诉TypeScript编译器如何编译你的项目。在tsconfig.json中，你可以指定模块解析选项、编译选项等。

{
    "compilerOptions": {
        "module": "commonjs", // 或 "es6", "amd", "umd", "system", "esnext"
        "target": "es5", // 或 "es3", "es6", "es2015", "es2016", "es2017", "es2018", "es2019", "es2020", "es2021", "esnext"
        "outDir": "./dist",
        "rootDir": "./src",
        "strict": true,
        // 其他选项...
    },
    "include": ["src/**/*"]
}

在这个例子中，module选项指定了TypeScript应该使用哪种模块系统来编译代码。target选项指定了编译后的JavaScript代码应该兼容哪个版本的ECMAScript标准。outDir和rootDir选项指定了编译输出和源文件的位置。

5. 使用模块的好处

代码组织：

模块允许你将代码分割成可管理的块，每个块都有其自己的职责。

避免命名冲突：

通过导出和导入机制，你可以避免全局作用域中的命名冲突。

重用性：

模块使得代码可以轻松地在不同的项目或文件之间重用。

可维护性：

模块化的代码更容易理解和维护，特别是当项目变得越来越大时。

模块是TypeScript中一个非常重要的特性，它使得代码更加模块化、可重用和易于维护。通过定义和使用模块，你可以更好地组织你的TypeScript项目，并与其他开发者共享代码。

本文地址：https://www.tides.cn/p_typescript-module