在前端开发中,使用模块化的方式来组织代码已经成为了主流。而在 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