如何创建和使用 TypeScript 模块

TypeScript 模块提供了一种结构化的方法来组织和管理代码。模块可以将代码封装到单独的文件中，从而提高可维护性、可重用性和可测试性。本指南介绍了创建和使用 TypeScript 模块的过程。

什么是 TypeScript 模块？

TypeScript 模块是导出和导入代码元素（例如类、函数和变量）的单独文件。通过使用模块，可以将代码拆分为可管理的部分，从而更好地控制代码不同部分之间的交互。

创建 TypeScript 模块

要创建 TypeScript 模块，应遵循以下步骤：

创建一个 TypeScript 文件： 首先为模块创建一个新的 `.ts` 文件，例如 `mathUtils.ts`。
定义和导出代码： 在此文件中实现函数、类或变量，并使用 export 关键字使它们可供其他模块使用。

简单模块的示例：

// mathUtils.ts

export function add(a: number, b: number): number {
  return a + b;
}

export function subtract(a: number, b: number): number {
  return a - b;
}

在此示例中，定义并从“mathUtils.ts”模块导出了“add”和“subtract”函数。

导入和使用 TypeScript 模块

要在另一个文件中使用 TypeScript 模块中的代码，必须将其导入。这涉及：

创建一个新的 TypeScript 文件： 生成将使用模块代码的文件，例如 `app.ts`。
导入模块： 使用 import 关键字从模块引入函数、类或变量。

导入和使用 `add` 和 `subtract` 函数的示例：

// app.ts

import { add, subtract } from './mathUtils';

const sum = add(5, 3);
const difference = subtract(5, 3);

console.log(`Sum: ${sum}`);
console.log(`Difference: ${difference}`);

在此示例中，`add` 和 `subtract` 函数从 `mathUtils` 模块导入并在 `app.ts` 文件中使用。

默认和命名导出

TypeScript 模块支持默认和命名导出。以下是简要概述：

默认导出： 可以使用 export default 从模块中将单个值导出为默认导出。
命名导出：可以使用带有 export 关键字的命名导出从模块导出多个值。

演示两种导出类型的示例：

// shapes.ts

export default class Circle {
  constructor(public radius: number) {}
  
  area(): number {
    return Math.PI * this.radius ** 2;
  }
}

export function getCircleInfo(radius: number): string {
  const circle = new Circle(radius);
  return `A circle with radius ${radius} has an area of ${circle.area()}`;
}

在这个例子中，`Circle` 被导出为默认导出，而 `getCircleInfo` 是一个命名导出。

组织项目中的模块

对于包含大量模块的大型项目，组织变得至关重要。请考虑以下提示：

目录结构： 将相关模块分组到目录中，例如“models/”、“services/”和“utils/”。
索引文件： 使用目录中的“index.ts”文件来聚合和重新导出模块，简化整个项目的导入。

目录结构示例：

project/
│
├── src/
│   ├── models/
│   │   ├── index.ts
│   │   └── user.ts
│   └── app.ts

结论

TypeScript 模块是组织和管理代码的关键功能。通过创建和使用模块，代码可以保持模块化、可维护和可扩展。了解如何导出和导入代码以及如何构建项目，可以提高 TypeScript 开发的效率。

typescript 模块导出导入函数类变量代码文件默认命名组织项目设置