TypeScript模块系统，新手上手指南，一键攻克，趣玩无穷

在编写 JavaScript 时，我们会用到 ESM、CommonJs、UMD 等模块系统。Typescript 支持多种模块系统，推荐的是 ESM 和 CommonJs。这两种模块系统有什么区别呢？我们又该如何使用它们呢？本文将带你一探究竟，让你轻松掌握 TypeScript 模块系统。

TypeScript 模块系统

TypeScript 模块系统是一种组织和管理代码的方式，它允许你将代码分成更小的单元，称为模块。每个模块都包含一组相关的函数、类和其他数据结构，并且可以被其他模块导入和使用。模块系统可以帮助你保持代码的组织性和可重用性，并使你的代码更容易维护和扩展。

ESM 和 CommonJS 的区别

ESM（ECMAScript Module）和 CommonJS 是两种最常见的 JavaScript 模块系统。它们之间最主要的区别在于导入和导出的方式不同。

• ESM 使用 import 和 export 来导入和导出模块。import 关键字用于导入其他模块，而 export 关键字用于导出模块中的函数、类和其他数据结构。
• CommonJS 使用 require() 函数和 module.exports 对象来导入和导出模块。require() 函数用于导入其他模块，而 module.exports 对象用于导出模块中的函数、类和其他数据结构。

除了导入和导出的方式不同之外，ESM 和 CommonJS 还有其他一些区别。例如，ESM 模块是静态的，这意味着它们在运行时是不可更改的。而 CommonJS 模块是动态的，这意味着它们可以在运行时进行更改。

如何使用 ESM 和 CommonJS

要使用 ESM，你需要在你的 TypeScript 代码中使用 import 和 export 关键字。例如，下面的代码演示了如何使用 import 关键字导入一个模块：

import { add, subtract } from "./math";

上面的代码从 math 模块导入 add 和 subtract 函数。要使用 CommonJS，你需要在你的 TypeScript 代码中使用 require() 函数和 module.exports 对象。例如，下面的代码演示了如何使用 require() 函数导入一个模块：

const math = require("./math");

上面的代码从 math 模块导入 math 对象。要导出一个模块，你可以使用 export 关键字或 module.exports 对象。例如，下面的代码演示了如何使用 export 关键字导出一个模块：

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

上面的代码导出了一个名为 add 的函数。要使用 module.exports 对象导出一个模块，你可以使用以下代码：

module.exports = {
  add: function(a: number, b: number): number {
    return a + b;
  }
};

上面的代码导出了一个名为 add 的函数。

总结

ESM 和 CommonJS 是两种最常见的 JavaScript 模块系统。它们之间最主要的区别在于导入和导出的方式不同。ESM 使用 import 和 export 关键字来导入和导出模块，而 CommonJS 使用 require() 函数和 module.exports 对象来导入和导出模块。

在 TypeScript 中，你可以使用 ESM 和 CommonJS 来组织和管理你的代码。推荐使用 ESM，因为它是一种更现代的模块系统，并且受到 TypeScript 的官方支持。