javascript - Typescript 中的导出和导入如何工作？

Question

我也在使用 Javascript 和 Typescript 学习 Angular2 快速入门教程，在 javascript 版本中，我观察到组件和模块首先分配给一个变量(window.app，我将其理解为一些全局变量)可以跨 js 文件或脚本 block 访问)，这很好。对于仅使用导出和导入的类型脚本版本，我尝试分析生成的 JavaScript 代码，但一无所获。有人可以解释一下 Tyepescript 中的导出和导入是如何工作的吗？

Answer 1

这里的文档很好地解释了 typescript 中的导入和导出 https://www.typescriptlang.org/docs/handbook/modules.html .

就像 toskv 在他的评论中所说，TypeScript 文件中的这些语句如何转换为 JavaScript 文件中的语句很大程度上取决于您在 tsconfig.json 中设置的模块系统文件。

例如，设置 "module": "commonjs"将导致 TypeScript 编译器 ( tsc ) 将您的导入/导出语句转换为实质上的 node.js 样式 require()声明。本文档有一些简单但有用的示例，说明了 node.js 模块如何工作:https://nodejs.org/api/modules.html 。

使用“systemjs”设置而不是“commonjs”将使 TypeScript 将您的导入/导出语句转换为 SystemJS 可以理解的格式，而我不是这方面的专家。

由于 Angular 2 项目还需要构建步骤来获取转译的 JavaScript 文件并将其转换为打包的“包”，因此该过程变得更加复杂。这些捆绑文件(取决于您的配置设置)是串联的、缩小的，甚至可能是丑化的。因此，查看最终运行的 JavaScript 代码确实没有帮助，因为它不是由人类编写的。

例如，Webpack 构建系统 (google webpack.js) 采用 require()它在 JavaScript 代码中找到语句，并使用一些魔法将每个模块包装在自己的 __webpack_require__ 中。函数，它允许构建系统获取整个项目文件结构并将其捆绑到一个或多个 JavaScript 文件中，这些文件仍然保持彼此的依赖关系。

换句话说，当您查看生成的 JavaScript 代码时，它并不意味着人类读者可以理解。流量可以简单地表示为 TS Source Code > TS Transpilation into JS Code > Module/Dependency Build Steps into Production JS Code .

TL;DR TypeScript 实际上并不处理模块导入/导出。在转译过程中，它将这些语句转换为其他模块系统(node.js 或 SystemJS)可以理解的语句，这些语句又被转换为为 Angular 2 应用程序提供服务的生产代码。