TypeScript 中的模块 (Module) 是一个重要的概念，它提供了一种组织代码的方式，使得代码更容易复用、维护和扩展。本文将深入介绍 TypeScript 中的模块，包括模块的定义、导出和导入、模块的命名空间和模块的加载器等。
模块的定义
TypeScript 中的模块可以使用 export 声明导出，使用 import 声明导入。可以用以下方式导出模块：
// www.javascriptcn.com code example
// 导出一个值
export const name = "jack";
// 导出一个函数
export function sayHello(name: string) {
console.log(`Hello, ${name}!`);
}
// 导出一个类
export class Person {
constructor(public name: string, public age: number) {}
sayHello() {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
}
// 导出一个接口
export interface Student {
name: string;
age: number;
}需要注意的是，导出的值可以是任意类型，包括基本类型、函数、类、接口等。同时，也可以使用 default 关键字来指定默认导出：
// www.javascriptcn.com code example
// 导出一个默认值
export default "hello world";
// 导出一个默认函数
export default function sayHello(name: string) {
console.log(`Hello, ${name}!`);
}
// 导出一个默认类
export default class Person {
constructor(public name: string, public age: number) {}
sayHello() {
console.log(`Hello, my name is ${this.name}, I'm ${this.age} years old.`);
}
}
// 导出一个默认接口
export default interface Student {
name: string;
age: number;
}只能有一个默认导出，同时也可以和普通导出并用。
模块的导入
使用 import 关键字可以导入模块：
// www.javascriptcn.com code example
// 导入一个值
import { name } from "./example";
// 导入一个函数
import { sayHello } from "./example";
// 导入一个类
import { Person } from "./example";
// 导入一个接口
import { Student } from "./example";
// 导入一个默认值
import defaultExample from "./example";
// 导入一个默认函数
import defaultSayHello from "./example";
// 导入一个默认类
import defaultPerson from "./example";
// 导入一个默认接口
import defaultStudent from "./example";需要注意的是，导入的模块不仅限于自己项目中的模块，也可以是 npm 上的第三方模块，甚至还可以是浏览器提供的原生模块。
模块的命名空间
除了使用 export 和 import 导出和导入模块外，TypeScript 还提供了另外一种组织代码的方式，即使用命名空间 (Namespace)。命名空间通过 namespace 关键字定义，可以嵌套其他命名空间，同时可以导出值。
// www.javascriptcn.com code example
namespace Animal {
export class Dog {
constructor(public name: string) {}
bark() {
console.log(`I'm ${this.name}, wang wang.`);
}
}
export class Cat {
constructor(public name: string) {}
miao() {
console.log(`I'm ${this.name}, miao miao.`);
}
}
}使用 namespace 关键字定义命名空间之后，可以使用 . 运算符访问嵌套的命名空间或者导出的值：
const dog = new Animal.Dog("Little Dog");
dog.bark(); // I'm Little Dog, wang wang.
const cat = new Animal.Cat("Little Cat");
cat.miao(); // I'm Little Cat, miao miao.需要注意的是，当使用命名空间时，需要使用 export 显式导出值，否则不能被其他模块所访问。
模块的加载器
在 TypeScript 中，模块的加载器是由具体的运行环境所提供的。对于浏览器或 Node.js 等环境，它们都提供了一些加载器，如：
- CommonJS：Node.js 的默认加载器。
- ES6 模块：Webpack 和 Rollup 等构建工具的默认加载器。
- SystemJS：一款通用的加载器，既支持 CommonJS 模块，也支持 ES6 模块。
在 TypeScript 中，可以使用 --module 选项来指定要使用的模块加载器。比如，当指定 --module commonjs 时，TypeScript 将使用 CommonJS 模块加载器。
tsc --module commonjs index.ts
需要注意的是，不同的模块加载器的语法和约束不同，需要根据具体的环境进行调整和迁移。
结语
本文介绍了 TypeScript 中的模块概念，包括模块的定义、导出和导入、模块的命名空间和模块的加载器等。通过深入学习和熟练掌握这些概念，可以有助于组织和管理代码，在开发项目中提高代码的可读性、可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d676cea941bf7134c3b3a3