TypeScript 中如何正确使用 export/import 语句

在前端开发中,使用模块化的方式来组织代码已经成为了主流。而在 TypeScript 中,我们可以使用 export/import 语句来实现模块化编程。本文将介绍如何正确地使用 export/import 语句,以及一些常见的使用场景。

export 语句

在 TypeScript 中,我们可以使用 export 语句将一个变量、函数或类导出为模块的公共 API。例如:

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

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

在上面的例子中,我们使用 export 语句将 sayHello 函数和 GREETING 变量导出为 greeter 模块的公共 API。这样,其他模块就可以通过 import 语句来使用这些导出的变量和函数了。

import 语句

在 TypeScript 中,我们可以使用 import 语句来导入其他模块的公共 API。例如:

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

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

在上面的例子中,我们使用 import 语句来导入 greeter 模块中导出的 sayHello 函数和 GREETING 变量。然后在 app.ts 中就可以使用这些导入的变量和函数了。

导出默认值

除了使用 export 语句来导出具名变量、函数或类外,我们还可以使用 export default 语句来导出一个模块的默认值。例如:

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

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

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

在上面的例子中,我们使用 export default 语句来导出 sayHello 函数作为 greeter 模块的默认值。然后在 app.ts 中,我们可以使用 import 语句来导入这个默认值。

需要注意的是,一个模块只能有一个默认导出,而且默认导出的变量名是可以随意指定的。

导入所有模块

有时候,我们可能需要导入一个模块中的所有导出。这时,我们可以使用 import * as 语句来导入整个模块。例如:

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

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

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

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

在上面的例子中,我们使用 import * as 语句来导入整个 greeter 模块。然后在 app.ts 中,我们可以使用 greeter. 前缀来访问 greeter 模块中的导出。

总结

在 TypeScript 中,我们可以使用 export/import 语句来实现模块化编程。通过本文的介绍,我们了解了如何正确地使用 export/import 语句,并且介绍了一些常见的使用场景。希望本文能够对 TypeScript 的初学者有所帮助。

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