ES6 模块（简称为模块）是指 ES6 新增的一种模块化编程的规范，它允许将程序划分为不同的几个文件，每个文件被看作是一个模块，并且可以按需导出和导入模块中的内容。而 TypeScript 是 JavaScript 的超集，它不仅支持 ECMAScript 最新标准中的各种语法特性，还具备了类型检查等强大的工具，其可以很好地支持 ES6 的模块化规范，同时也可以在导入和导出时候检查类型，大大减少代码写错的可能性。本文将会详细介绍在 TypeScript 中使用 ES6 模块的方法和技巧以及注意事项。
导入和导出 ES6 模块
在 TypeScript 中使用 ES6 模块最重要的是了解如何导入和导出模块。在 ES6 中我们可以使用 export 来导出一个模块，这个模块可以是变量，函数或类。同时，我们也可以使用 import 来导入模块，在 ES6 中模块的导入分为按名字导入和按默认导入两种方式。在 TypeScript 中，我们可以在 import 语句中使用 as 来进行类型提示，如下所示：
-- ----- ------ --- -- ---- ----------- -- ----- ------ ------ ---- ----------- -- ---- ------ - -- -------- ---- -----------
上面代码中，按名字导入会将 lib.js 模块中的 x 和 y 两个变量导入到当前模块，按默认导入会将 lib.js 模块中默认导出（只能有一个）的变量、函数或类导入到当前模块，而 * as 表示将所有的导出成员导入到一个名为 myModule 的对象中。
同时，和 ES6 模块一样，我们在 TypeScript 中也可以使用 export 语句导出一个模块，如下所示：
-- ----
------ ----- -- - -----
-- ----
------ -------- -------------- ------- -
------------------- -----------
-
-- ---
------ ----- ------ -
----- -------
----------------- ------- -
--------- - -----
-
-上面代码中，我们使用 export 将常量、函数和类导出到当前模块中，同时也可以将当前模块作为一个默认导出，如下所示：
------ ------- -------- ------ ------- -- ------- - ------ - - -- -
上面代码中，我们将 add 函数作为默认导出，即一个模块只能有一个默认输出，而且可以在导入时重命名。
使用命名空间和模块
在 TypeScript 中，我们可以使用命名空间和模块来组织和管理代码，以便更好地实现模块化开发。命名空间是一个具有命名的对象，用于在全局范围内包含和访问一组相关的函数、属性和接口。而模块则是一个外部的文件或者一组相关联的外部文件，用于定义和导出一组相关的函数、接口等。
在 TypeScript 中，我们可以使用 namespace 和 module 关键字来定义命名空间和模块，如下所示：
-- --------
--------- ----------- -
------ ----- -- - -----
------ -------- -------------- ------- -
------------------- -----------
-
-
-- ------
------ --------- -------- -
------ -------- -------------- ------- -
------------------- -----------
-
-上面代码中，我们使用 namespace 定义了一个名为 MyNamespace 的命名空间，并将其中的常量和函数通过 export 导出。而 export namespace 则定义了一个名为 MyModule 的模块，并将其中的函数也导出到外部进行访问。
使用 ES6 模块类型定义
在 TypeScript 中，为了能够正确地进行类型检查，我们需要根据 ES6 模块的特性来正确地进行类型定义。ES6 模块中的导出和导入是可以自动类型推导的，但是不一定可以满足自定义类型推导的需求。因此，为了展示 ES6 模块类型定义的方法，我们来看一个例子：
-- ------
------ --------- ------ -
----- -------
-
------ ----- --- ---------- ------ -
----- -------
----------------- ------- -
--------- - -----
-
------- -
------------------------- ----- - ---------
-
-
-- -------
------ - ------- --- - ---- -----------
----- ---- ------ - --- -----------
----------------------上面代码中，我们导出了一个 Animal 接口和一个 Cat 类，并在 main.ts 中引入了 Animal 和 Cat。这时需要注意的是，我们并没有为 Animal 接口和 Cat 类显示地定义类型，因为 ES6 模块支持自动类型推导。但是，如果我们需要自定义类型推导的话，可以使用 export type 来对接口类型和类类型进行类型定义，如下所示：
-- ------
------ ---- - ---------- --
------ ---- ---------- - -
----- -------
--
------ ------- ----- --- ---------- ---------- -
----- -------
----------------- ------- -
--------- - -----
-
------- -
------------------------- ----- - ---------
-
-
-- -------
------ ---- - ---------- - ---- -----------
------ --- ---- -----------
----- ---- ---------- - --- -----------
----------------------上面代码中，我们使用 export type 定义了一个名为 AnimalType 的接口类型，并在模块中使用。而在 main.ts 中，我们使用 import type 和 import 分别导入了 AnimalType 和 Cat，并在创建 Cat 实例时使用了 AnimalType 对其进行类型约束。
总结
本文中，我们详细介绍了在 TypeScript 中使用 ES6 模块的方法和技巧，并且讲述了在导入和导出时的注意事项以及 ES6 模块类型定义的方法。通过阅读本文，读者可以理解 TypeScript 中 ES6 模块的规范和特性，并掌握如何使用它们在 TypeScript 中进行模块化开发，为日后进行前端开发做好准备。
附：完整示例代码
-- ------
------ ---- - ---------- --
------ ---- ---------- - -
----- -------
--
------ ------- ----- --- ---------- ---------- -
----- -------
----------------- ------- -
--------- - -----
-
------- -
------------------------- ----- - ---------
-
-
-- -------
------ ---- - ---------- - ---- -----------
------ --- ---- -----------
----- ---- ---------- - --- -----------
----------------------来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/664f2bced3423812e402e751