如何输出和输入工作在打字稿？

Question

我正在使用Javascript和Typescript进行Angular2快速入门教程，在javascript版本中，我观察到组件和模块首先被分配给一个变量（window.app，我理解为可以跨js访问的一些全局变量文件或脚本块），这很好。为了输入脚本版本，只是使用导出和导入，我试图分析生成的JavaScript代码，但什么都不理解。有人可以解释我如何在Tyepescript中输出和输入。

Answer 1

打字稿中的输入和输出在这里的文档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构建系统（谷歌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应用程序提供服务的产品代码。