TypeScript 是一种由 Microsoft 开发的 JavaScript 的超集。除了继承了 JavaScript 的语法和特性之外，TypeScript 还添加了一些新的功能，其中之一就是模块系统。在前端开发中，模块系统常常用于在不同的文件之间组织代码、复用代码和解决命名冲突等问题。在本文中，我们将深入研究 TypeScript 中的模块系统。
模块的概念
在 TypeScript 中，一个模块就是一个独立的代码组件，它可以包含变量、函数、类、接口、枚举和其他模块等多种形式的代码，并且模块的内部成员默认是私有的，只有在模块内部才能访问。要在模块外部访问模块内部的成员，必须显式导出这些成员，并在导入它们的模块中进行引用。
在 TypeScript 中，有两种类型的模块：内部模块和外部模块。内部模块也叫命名空间，它是一种封装机制，用于组织和保护代码。外部模块也叫模块，它是一种在不同的文件之间共享代码的结构化方式。我们重点讨论外部模块的使用。
模块的导出
在 TypeScript 中，一个模块可以导出任意数量的成员，包括变量、函数、类、接口和其他模块等。要导出一个成员，我们可以使用 export 关键字，然后在导入它的模块中使用 import 关键字进行引用。
-- -------------------- ---- -------
-- ------- --
------ ----- -- - --------
------ -------- --------- -------- ------ -
------ - - --
-
------ ----- ------ -
------------------- ------- ------- --
--- ------------ ------ -
------ - - ------- - ------------
-
--- ------- ------ -
------ ------- - ----------- - ------------
-
-
-- ------ --
------ - --- ------- ------ - ---- ---------
----- ------ - ---
----- ------ - --- ---------------
---------------- --------- ------ ----------------------- -----------------
------------------- --------------------
----------------- --------上面的示例定义了一个 math.ts 模块，它导出了一个常量、一个函数和一个类。在另一个模块 app.ts 中，我们使用 import 关键字引入了 math.ts 模块中的三个成员，并在其中使用了这些成员。
模块的导入
在 TypeScript 中，要导入一个模块中的成员，我们可以使用 import 关键字，后加一对花括号 { }，中间添加导入的成员名，并指定从哪个模块导入。如果要给导入的成员添加别名，可以使用 as 关键字。
-- -------------------- ---- ------- -- ------ -- ------ - -- -- ---------- ------- ------ - ---- --------- ----- ------ - --- ----- ------ - --- --------------- ---------------- --------- ------ ----------------------- ----------------- ------------------- -------------------- ----------------- ---------------
上面的示例导入了 math.ts 模块中的三个成员，并为其中的 PI 常量添加了别名 PI_NUMBER。
TypeScript 中的模块系统还支持导入一个模块中的所有成员，可以使用 * as 关键字来实现。
-- -------------------- ---- ------- -- ------ -- ------ - -- ---- ---- --------- ----- ------ - --- ----- ------ - --- -------------------- ---------------- --------- ------ ----------------------- ----------------- ------------------- ------------------------- ----------------- -------------
上面的示例导入了 math.ts 模块中的所有成员，并用 math 对象来引用其中的成员。
模块的默认导入
在 TypeScript 中，一个模块可以指定一个默认导出。默认导出是一个模块的主要导出，它不需要使用花括号 { } 来引用，并且可以使用 as 关键字给默认导出起一个别名。如果一个模块仅仅导出一个成员，那么它应当是默认导出。
-- -------------------- ---- -------
-- ---------- --
------ ------- ----- ------- -
------------------- ----- ------- --
------ -------- ------ -
------ ------- ---------------
-
-
-- ------ --
------ ----- ---- ------------
----- ------- - --- ----------------
-----------------------------上面的示例定义了一个默认导出的 Greeter 类，并在另一个模块 app.ts 中使用了这个类。
默认导出可以和普通导出同时存在，并且可以和 * as 导入同时使用。
-- -------------------- ---- -------
-- --------- --
------ ----- ---------- - --------------------------
------ ----- ------- - ---------
------ ------- -
------------ -------- ------ -
------ --------------------------------------
-
--
-- ------ --
------ ------- - ---------- - ---- -----------
---------------- ---- ---- ----------------
---------------- ---- -------------------- -------------上面的示例定义了一个默认导出的配置对象，并在另一个模块 app.ts 中同时使用了它和一个普通导出的常量。
模块的路径
在 TypeScript 中，要与外部模块交互，我们需要知道它们所在的文件和路径。TypeScript 的模块路径可以是相对路径或绝对路径。
相对路径是相对于当前模块的路径计算的，可以使用相对路径来引用同一目录下的模块，也可以使用 ../ 或 ./ 来引用父目录或当前目录下的模块。
绝对路径是相对于根路径计算的，可以使用根路径来引用项目中的任意模块。在 TypeScript 中，根路径是通过配置文件 tsconfig.json 中的 baseUrl 和 paths 来定义的。例如：
{
"baseUrl": ".",
"paths": {
"*": ["src/*"]
}
}上面的配置指定了根路径为当前目录 .，并将所有以 src/ 开头的模块路径映射到 src/ 目录下。这样，在模块中使用 import 和 export 时，就可以使用相对路径和根路径的方式进行导入和导出。
总结
TypeScript 中的模块系统是一种强大而灵活的结构化方式，它使得代码可以被分解成独立的组件，并可以在不同的文件之间共享。在编写 TypeScript 代码时，我们应当熟悉模块的导出和导入、路径的管理和默认导出的使用。这些知识可以使我们更好地组织代码、避免命名冲突、提高代码复用性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6460d484968c7c53b0270a75