19 模块与命名空间 📁之导入与导出

在上文中，我们讨论了命名空间的概念，它为我们提供了组织代码的一种方式，使得代码之间的逻辑关系更加清晰。而在本章中，我们将深入探讨 TypeScript 中的模块系统，特别是如何使用模块的导入与导出。

什么是模块？

模块是代码的一个自包含单元，通常指一个文件或多个文件的集合。通过模块，我们可以将功能划分为独立的部分，使得代码更加清晰和可维护。TypeScript 的模块化系统基于 ES6 的模块标准。

模块主要有两个方面：导出（export）和导入（import）。

导出

在 TypeScript 中，您可以使用 export 关键字将变量、函数、类等导出。这样，它们就可以在其他模块中被引用。

导出变量

// math.ts
export const PI = 3.14;
export const E = 2.71;

在上述代码中，我们将 PI 和 E 这两个常量导出，使得它们可以在别的模块中使用。

导出函数

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

这里我们导出了一个名为 add 的函数。

导出类

// person.ts
export class Person {
    constructor(public name: string, public age: number) {}
}

在这段代码中，我们导出了一个 Person 类。

导入

当我们完成导出后，就可以在其他模块中使用这些导出的代码。我们使用 import 关键字来导入模块。

导入变量

// main.ts
import { PI, E } from './math';

console.log(`PI: ${PI}, E: ${E}`);

在这段代码中，我们导入了 math.ts 中的 PI 和 E 变量，并输出它们的值。

导入函数

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

console.log(`1 + 2 = ${add(1, 2)}`);

我们从 math.ts 中导入了 add 函数，并使用它来计算 1 和 2 的和。

导入类

// main.ts
import { Person } from './person';

const john = new Person('John Doe', 30);
console.log(`Name: ${john.name}, Age: ${john.age}`);

在这段代码中，我们导入了 Person 类并创建了一个实例。

导出默认

TypeScript 允许每个模块导出一个默认值。使用 export default 关键字可以实现这一点。

// car.ts
export default class Car {
    constructor(public model: string) {}
}

您可以用更简洁的方式进行导入：

// main.ts
import Car from './car';

const myCar = new Car('Toyota');
console.log(`Car model: ${myCar.model}`);

在这种情况下，我们通过默认导出，只需要指定模块文件的名称来导入 Car 类。

重新导出

如果您希望将一个模块中的所有内容重新导出，可以使用 export * from 语法。

// index.ts
export * from './math';
export * from './person';

这样，index.ts 就成了一个汇总模块，任何人导入 index.ts 都可以访问从 math.ts 和 person.ts 导出的所有内容。

小结

在本章中，我们学习了 TypeScript 中的模块系统，包括如何使用 export 和 import 关键字来导出和导入变量、函数和类。模块化编程不仅使代码更易于维护，还提高了代码的重用性。

在下一篇中，我们将深入探讨模块化的最佳实践，以确保我们的代码结构清晰和高效。

---

希望这篇章节能够帮助您更好的理解 TypeScript 中的导入与导出，并为后续的模块化最佳实践打下基础。