七步学会TypeScript - 第六步-模块

在 TypeScript 中，模块是一种用于组织和管理代码的方式，它可以将代码拆分成多个文件，并在不同的文件中导入和导出需要的部分。让我们详细了解如何使用模块来组织代码和管理依赖。

1. 导出模块：

在一个 TypeScript 文件中，你可以使用 export 关键字将某个变量、函数、类等导出为一个模块，使得其他文件可以导入并使用它。

假设你有一个名为 math.ts 的文件，其中包含一个加法函数：

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

2. 导入模块：

在另一个文件中，你可以使用 import 关键字来导入刚刚定义的模块，然后就可以使用其中的内容了。

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

console.log(add(5, 3)); // 输出：8

在这个例子中，我们从 math.ts 文件中导入了 add 函数，然后在 app.ts 文件中使用了它。

3. 默认导出：

除了命名导出（使用 export 关键字导出的内容），你还可以使用默认导出。默认导出允许你为模块指定一个主要的导出内容。

// math.ts
export default function multiply(x: number, y: number): number {
  return x * y;
}

// app.ts
import multiplyFunction from "./math";

console.log(multiplyFunction(4, 3)); // 输出：12

在这个示例中，我们使用 default 关键字在 math.ts 文件中导出了一个函数，并在 app.ts 文件中使用了默认导出。

通过模块，你可以将代码拆分成多个文件，每个文件专注于一个特定的功能，然后通过导入和导出来组织这些文件。这可以帮助你更好地管理复杂的代码库，提高代码的可读性和可维护性。需要注意的是，模块的具体用法可能会受到你所使用的 JavaScript 运行环境的支持情况的影响。

当涉及到复杂的模块和代码组织时，实际应用的场景会更加多样和具体。以下是一些复杂一点的例子，展示了模块如何帮助你更好地组织代码。

1. 多个模块之间的相互依赖：

假设你正在构建一个图书馆管理系统，有不同的模块来处理图书、读者、借阅等功能。每个模块都可以单独开发和维护，然后通过导入和导出来互相依赖。

book.ts 模块：

export class Book {
  title: string;
  author: string;

  constructor(title: string, author: string) {
    this.title = title;
    this.author = author;
  }
}

reader.ts 模块：

import { Book } from "./book";

export class Reader {
  name: string;
  borrowedBooks: Book[];

  constructor(name: string) {
    this.name = name;
    this.borrowedBooks = [];
  }

  borrowBook(book: Book) {
    this.borrowedBooks.push(book);
  }
}

2. 使用命名空间（namespace）：

命名空间是一种将相关的代码组织在一起的方式，它可以防止全局命名冲突。你可以将一组相关的函数、类等放在一个命名空间下，然后导出它们。

geometry.ts 模块：

namespace Geometry {
  export interface Point {
    x: number;
    y: number;
  }

  export function distance(point1: Point, point2: Point): number {
    return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
  }
}

app.ts 模块：

import { Geometry } from "./geometry";

const point1: Geometry.Point = { x: 0, y: 0 };
const point2: Geometry.Point = { x: 3, y: 4 };

const dist = Geometry.distance(point1, point2);
console.log(dist); // 输出：5

3. 使用模块的文件结构：

在一个大型项目中，你可能会有多个模块，并将它们按文件结构进行组织。以下是一个可能的文件结构：

src/
|-- math/
|   |-- basicMath.ts
|   |-- advancedMath.ts
|-- geometry/
|   |-- point.ts
|   |-- line.ts
|-- app.ts

basicMath.ts 模块：

export function add(x: number, y: number): number {
  return x + y;
}

export function subtract(x: number, y: number): number {
  return x - y;
}

point.ts 模块：

export interface Point {
  x: number;
  y: number;
}

在这个文件结构中，每个模块都在自己的文件中定义，并且可以按需导入和导出，使代码更加模块化和可维护。

这些例子展示了如何使用模块来组织复杂的代码，并展示了模块之间的依赖关系、命名空间的使用以及文件结构的组织方式。实际中，根据项目的规模和需求，你可以进一步灵活地结构化代码。