在 TypeScript 中使用 ES6 模块

ES6 模块是 JavaScript 中用于组织代码的一种模块化系统,它可以方便地分离代码并将其组织成独立的模块。而 TypeScript 中提供了更强大的静态类型检查功能,使得开发者能够更加安全地管理代码,在进行模块化开发过程中,如何使用 ES6 模块已成为必修基础课程。

在 TypeScript 中,我们可以通过以下方法来使用 ES6 模块:

导入模块

导入模块是使用 ES6 模块的第一步,使用 import 语句可以让我们将已存在的模块引入到当前的模块中。在 TypeScript 中导入模块可以使用以下语法:

------ - ---------- - ---- ---------------

这个语法行中,我们通过花括号 {} 来列出需要导入的名称,在这个例子中,我们从名为 ./moduleName 的模块中导入了一个名为 ModuleName 的成员变量。

导入默认成员

有时我们需要从一个模块中导入默认成员,这时候我们可以使用以下语法:

------ ------- ---- ---------------

这里的 Default 就是指向默认导出的变量名字,如果一个 ES6 模块只导出了一个默认成员,那么我们可以用这种方式来导入它。

导出模块

导出模块同样也是使用 ES6 模块必须掌握的一项技能。在 TypeScript 中我们可以通过以下语法来导出模块:

------ ---------- - ---------------------

在这个例子中,我们创建了一个名为 moduleName 的变量并将它导出,默认情况下这个变量是可以被其他的模块使用的。

我们也可以将一个默认的变量导出:

------ ------- ----------------------------

这里,我们使用了 default 关键字来将这个变量设置为默认的导出成员,这就意味着其他模块可以使用 import 语句来获取这个默认成员。

下面来看几个 TypeScript 中的 ES6 模块的实例:

-- ----
------ - --- - ---- --------
------ - ----- - ---- ----------
------ ------------ ---- ----------

-- ----
----- ---- --- - --- ------
----- ------ ----- - --- --------
--------------------------

-- ----
------ ----- --- -
  -- ----- -----------------
-

------ ----- ----- -
  -- ----- -----------------
-

------ ------- ----------------------------

这个例子中,我们首先通过 import 语句从 ./car./truck 中导入了 CarTruck 类,以及从 ./truck 中导入了默认导出成员 DefaultTruck。 然后实例化 CarTruck 类并输出了 DefaultTruck 的值,最后我们又将两个类通过 export 关键字导出到当前的模块中,并将一个默认导出成员设置为了字符串 ExportedModuleDefaultName

总结

在 TypeScript 中使用 ES6 模块,我们需要掌握两个关键词,importexport。使用 import ourClass from 'ourModule' 可以导入特定的变量或者类,使用export class ClassName { } 会将类 ClassName 导出供其他模块使用。它们的使用可以让我们更好地管理和组织代码,提高可维护性和开发效率。

来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6641dbd6d3423812e4fda7f9