Javascript 如何在typescript中导出和导入？_Javascript_Angular_Typescript

Javascript 如何在typescript中导出和导入？

javascript angular typescript

Javascript 如何在typescript中导出和导入？,javascript,angular,typescript,Javascript,Angular,Typescript,我也在学习关于Javascript和Typescript的Angular2快速入门教程，在Javascript版本中，我观察到组件和模块首先被分配给一个变量（window.app，我理解为可以跨js文件或脚本块访问的某个全局变量），这很好。在输入仅使用导出和导入的脚本版本时，我试图分析生成的javascript代码，但什么都不懂。有人能解释一下typescript中的导出和导入是如何工作的吗？这里的文档很好地解释了typescript中的导入和导出正如toskv在评论中所说，TypeScrip

我也在学习关于Javascript和Typescript的Angular2快速入门教程，在Javascript版本中，我观察到组件和模块首先被分配给一个变量（window.app，我理解为可以跨js文件或脚本块访问的某个全局变量），这很好。在输入仅使用导出和导入的脚本版本时，我试图分析生成的javascript代码，但什么都不懂。有人能解释一下typescript中的导出和导入是如何工作的吗？

这里的文档很好地解释了typescript中的导入和导出

正如toskv在评论中所说，TypeScript文件中的语句如何转换为JavaScript文件中的语句，很大程度上取决于在

tsconfig.json

文件中设置的模块系统

例如，设置

“module”：“commonjs”

将导致TypeScript编译器（

tsc

）将导入/导出语句转换为node.js-style

require（）

语句。本文档提供了几个简单但有用的node.js模块工作原理示例：

使用“systemjs”而不是“commonjs”的设置将使TypeScript将您的导入/导出语句转换为systemjs能够理解的格式，对此我不是专家

Angular 2项目还需要构建步骤，将传输的JavaScript文件转化为打包的“捆绑包”，这一事实使这个过程更加复杂。这些捆绑文件（取决于您的配置设置）是串联的、缩小的，甚至可能是丑陋的。因此，查看最终运行的javascript代码确实没有帮助，因为它不是由人类编写的

例如，Webpack构建系统（google Webpack.js）使用它在JavaScript代码中找到的

require（）

语句，并使用一些神奇的方法将每个模块包装在自己的

\uuuuuwebpack\urequire\uuuuu

函数中，它允许构建系统获取整个项目文件结构，并将其捆绑到一个或多个JavaScript文件中，这些文件仍然保持彼此的依赖关系

换句话说，当您查看产品JavaScript代码时，它并不意味着人类读者可以理解。流程可以简单地表示为

TS源代码

TS转换为JS代码

模块/依赖项构建步骤到生产JS代码

TL；DR TypeScript实际上并不处理模块的导入/导出。在编译过程中，它将这些语句转换为其他模块系统（node.js或SystemJS）可以理解的语句，然后再转换为用于Angular 2应用程序的生产代码