TypeScript 教程(七)：模块与命名空间

前言

在前几章中，我们学习了 TypeScript 的基础知识、函数与对象类型、接口与类、以及泛型编程。在本章中，我们将深入探讨 TypeScript 中的模块与命名空间。模块和命名空间是组织代码的两种主要方式，它们有助于代码的模块化和重用性。

系列文章列表

• TypeScript 教程(一)：安装和tsc编译
• TypeScript 教程(二)：类型与类型注解
• TypeScript 教程(三)：函数与对象类型
• TypeScript 教程(四)：高级类型与类型操作
• TypeScript 教程(五)：接口与类
• TypeScript 教程(六)：泛型编程
• TypeScript 教程(七)：模块与命名空间
• TypeScript 教程(八)：装饰器与高级类型操控
• TypeScript 教程(九)：类型声明文件与异步编程
• TypeScript 教程(十)：项目配置、代码质量与前端框架集成

回顾泛型编程

在上一章中，我们学习了以下内容：

• 泛型函数
• 泛型接口
• 泛型类
• 泛型约束
• 多重类型参数与默认类型

---

正文开始 ， 如果觉得文章对您有帮助，请帮我三连+订阅，谢谢💖💖💖

---

1. 模块

模块是 TypeScript 和 JavaScript 的基本构建块之一，用于组织代码。每个模块都有自己的作用域，不会与其他模块的变量发生冲突。

a. 导入和导出

使用 export 关键字将模块中的变量、函数或类导出，以便在其他模块中使用。

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

export const PI = 3.14;

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

console.log(add(5, 10)); // 15
console.log(PI); // 3.14

b. 默认导出

使用 export default 关键字可以导出一个默认值，每个模块只能有一个默认导出。

// person.ts
export default class Person {
  name: string;
  
  constructor(name: string) {
    this.name = name;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

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

let person = new Person("Alice");
person.greet(); // "Hello, my name is Alice"

c. 重命名导入和导出

在导入和导出时，可以使用 as 关键字进行重命名。

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

// main.ts
import { subtract as sub } from './math';

console.log(sub(10, 5)); // 5

2. 命名空间

命名空间用于组织代码，可以将相关的代码放在一个命名空间中，以避免全局作用域中的命名冲突。

a. 定义命名空间

使用 namespace 关键字定义命名空间，并将相关的代码放入其中。

namespace Geometry {
  export function areaOfCircle(radius: number): number {
    return Math.PI * radius * radius;
  }

  export function areaOfRectangle(width: number, height: number): number {
    return width * height;
  }
}

console.log(Geometry.areaOfCircle(5)); // 78.53981633974483
console.log(Geometry.areaOfRectangle(10, 20)); // 200

b. 嵌套命名空间

命名空间可以嵌套使用，以进一步组织代码。

namespace Animals {
  export namespace Mammals {
    export class Dog {
      bark() {
        console.log("Woof!");
      }
    }
  }

  export namespace Birds {
    export class Sparrow {
      chirp() {
        console.log("Chirp!");
      }
    }
  }
}

let dog = new Animals.Mammals.Dog();
dog.bark(); // "Woof!"

let sparrow = new Animals.Birds.Sparrow();
sparrow.chirp(); // "Chirp!"

3. 动态导入与条件导入

a. 动态导入

使用 import() 语法可以动态导入模块，这在需要按需加载模块时非常有用。

// main.ts
function loadModule(moduleName: string) {
  import(`./${moduleName}`).then(module => {
    console.log(module);
  }).catch(err => {
    console.error("Failed to load module", err);
  });
}

loadModule('math');

b. 条件导入

可以根据条件有选择地导入模块。

// main.ts
let isMathModuleNeeded = true;

if (isMathModuleNeeded) {
  import('./math').then(module => {
    console.log(module.add(5, 10)); // 15
  });
} else {
  console.log("Math module is not needed.");
}

结语

通过本章的学习，你应该对 TypeScript 中的模块与命名空间有了更深入的理解。掌握这些内容将使你能够更加有效地组织和管理代码。在下一章中，我们将继续探讨 TypeScript 中的装饰器与高级类型操控，包括类装饰器、方法装饰器、访问器装饰器、属性装饰器、参数装饰器、类型别名、映射类型、条件类型和工具类型等内容。务必掌握好每个概念，它们将为你后续学习 TypeScript 提供坚实的基础。