typescript模块化

typescript模块化

在现代的软件开发中，模块化是一个非常重要的概念。它允许我们将代码拆分成独立的功能模块，从而提高代码的可维护性和复用性。在TypeScript中，我们可以使用模块化来组织我们的代码，并通过导出和导入模块来实现模块之间的通信。

导出和导入模块

在TypeScript中，我们可以使用export关键字来导出变量、函数、类等，让其在其他模块中可见和可访问。然后，在其他模块中使用import关键字来导入这些被导出的内容。

示例代码：

创建一个名为math.ts的文件，其中包含两个导出的函数：

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

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

在另一个文件中使用import关键字来导入这些函数并使用：

// app.ts
import { add, subtract } from './math';

console.log(add(5, 10)); // Output: 15
console.log(subtract(20, 8)); // Output: 12

命名空间

命名空间是一个在代码中用来组织和管理模块的方法，它可以避免命名冲突并使得代码结构更清晰。在TypeScript中，我们可以使用namespace关键字来声明和使用命名空间。

示例代码：

创建一个名为shapes.ts的文件，其中定义一个命名空间Shapes，并在其中声明一个Rectangle类：

// shapes.ts
namespace Shapes {
  export class Rectangle {
    constructor(public width: number, public height: number) {}
    getArea(): number {
      return this.width * this.height;
    }
  }
}

在另一个文件中使用/// <reference path="shapes.ts" />来引用shapes.ts文件中的命名空间，并使用其中的类：

// app.ts
/// <reference path="shapes.ts" />

const rect = new Shapes.Rectangle(5, 10);
console.log(rect.getArea()); // Output: 50

在这个示例中，我们使用export关键字将add和subtract函数导出，然后在app.ts文件中使用import关键字来导入这两个函数，并在代码中使用它们。

而对于命名空间的示例中，我们在shapes.ts文件中声明了一个Shapes命名空间，并在其中定义了Rectangle类。然后在app.ts文件中使用/// <reference path="shapes.ts" />来引用shapes.ts文件中的命名空间，并使用其中的Rectangle类。