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

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

这里的文档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应用程序的生产代码.