模块解析 | 详尽剖析TypeScript中的模块概念

前端

2023-12-24 20:16:46

TypeScript从1.5版本开始，内部模块用命名空间表示，外部模块用module表示。

当文件内包含多个不同功能的组件时，将这些组件组织成独立的模块可以增强代码的可读性和可维护性。

模块解析机制

TypeScript中，每个文件都是一个独立的模块。

使用export将模块中的变量、函数、类或接口暴露给其他模块使用。

import用于导入其他模块中的内容，以便在当前模块中使用。

命名空间

命名空间用于将相关的变量、函数、类或接口组织成一个逻辑分组，以避免名称冲突。

使用declare namespace可以声明一个命名空间。

命名空间中的成员可以使用.访问。

例如：

declare namespace MyNamespace {
  export const PI = 3.14;

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

console.log(MyNamespace.PI); // 3.14
console.log(MyNamespace.sum(1, 2)); // 3

导入和导出

export用于将模块中的变量、函数、类或接口暴露给其他模块使用。

import用于导入其他模块中的内容，以便在当前模块中使用。

导出成员时，可以使用export。

导入成员时，可以使用import关键字。

例如：

// module1.ts
export const PI = 3.14;

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

// module2.ts
import { PI, sum } from "./module1";

console.log(PI); // 3.14
console.log(sum(1, 2)); // 3