ES6 模块是 JavaScript 中用于组织代码的一种模块化系统,它可以方便地分离代码并将其组织成独立的模块。而 TypeScript 中提供了更强大的静态类型检查功能,使得开发者能够更加安全地管理代码,在进行模块化开发过程中,如何使用 ES6 模块已成为必修基础课程。
在 TypeScript 中,我们可以通过以下方法来使用 ES6 模块:
导入模块
导入模块是使用 ES6 模块的第一步,使用 import 语句可以让我们将已存在的模块引入到当前的模块中。在 TypeScript 中导入模块可以使用以下语法:
------ - ---------- - ---- ---------------
这个语法行中,我们通过花括号 {}
来列出需要导入的名称,在这个例子中,我们从名为 ./moduleName
的模块中导入了一个名为 ModuleName
的成员变量。
导入默认成员
有时我们需要从一个模块中导入默认成员,这时候我们可以使用以下语法:
------ ------- ---- ---------------
这里的 Default
就是指向默认导出的变量名字,如果一个 ES6 模块只导出了一个默认成员,那么我们可以用这种方式来导入它。
导出模块
导出模块同样也是使用 ES6 模块必须掌握的一项技能。在 TypeScript 中我们可以通过以下语法来导出模块:
------ ---------- - ---------------------
在这个例子中,我们创建了一个名为 moduleName
的变量并将它导出,默认情况下这个变量是可以被其他的模块使用的。
我们也可以将一个默认的变量导出:
------ ------- ----------------------------
这里,我们使用了 default
关键字来将这个变量设置为默认的导出成员,这就意味着其他模块可以使用 import
语句来获取这个默认成员。
下面来看几个 TypeScript 中的 ES6 模块的实例:
-- ---- ------ - --- - ---- -------- ------ - ----- - ---- ---------- ------ ------------ ---- ---------- -- ---- ----- ---- --- - --- ------ ----- ------ ----- - --- -------- -------------------------- -- ---- ------ ----- --- - -- ----- ----------------- - ------ ----- ----- - -- ----- ----------------- - ------ ------- ----------------------------
这个例子中,我们首先通过 import
语句从 ./car
和 ./truck
中导入了 Car
和 Truck
类,以及从 ./truck
中导入了默认导出成员 DefaultTruck
。
然后实例化 Car
和 Truck
类并输出了 DefaultTruck
的值,最后我们又将两个类通过 export
关键字导出到当前的模块中,并将一个默认导出成员设置为了字符串 ExportedModuleDefaultName
。
总结
在 TypeScript 中使用 ES6 模块,我们需要掌握两个关键词,import
和 export
。使用 import
ourClass from 'ourModule' 可以导入特定的变量或者类,使用export
class ClassName { } 会将类 ClassName 导出供其他模块使用。它们的使用可以让我们更好地管理和组织代码,提高可维护性和开发效率。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/6641dbd6d3423812e4fda7f9