我也在使用 Javascript 和 Typescript 浏览 Angular2 快速入门教程，在 javascript 版本中，我观察到组件和模块首先分配给一个变量 (window.app 我理解为一些全局变量可以跨 js 文件或脚本块访问），这很好。来到只使用导出和导入的类型脚本版本，我试图分析生成的 javascript 代码但什么也不懂。有人可以解释一下这种导出和导入在 Typescript 中是如何工作的吗？
【问题讨论】：
标签： javascript angular typescript
https://www.typescriptlang.org/docs/handbook/modules.html 此处的文档很好地解释了 typescript 中的导入和导出。
就像 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) 采用它在 JavaScript 代码中找到的 require() 语句，并使用一些魔法将每个模块包装在其自己的 __webpack_require__ 函数中，这允许构建系统获取您的整个项目文件结构并将其捆绑到一个或多个 JavaScript 文件中，这些文件仍然保持彼此之间的依赖关系。
换句话说，当您查看生产 JavaScript 代码时，它并不意味着人类读者可以理解。流可以简单地表示为TS Source Code > TS Transpilation into JS Code > Module/Dependency Build Steps into Production JS Code。
TL;DR TypeScript 实际上并不处理模块导入/导出。在转译期间，它将这些语句转换为 other 模块系统（node.js 或 SystemJS）可以理解的语句，然后将其转换为生产代码以服务于 Angular 2 应用程序。
【讨论】：