Modules
JavaScript 在处理模块化代码方面有着悠久的历史。 TypeScript 自 2012 年问世以来，已经实现了对许多这些格式的支持，但随着时间的推移，社区和 JavaScript 规范已经融合到一种称为 ES 模块（或 ES6 模块）的格式上。 您可能知道它是 import/export 语法。
ES Modules 于 2015 年添加到 JavaScript 规范中，到 2020 年在大多数 Web 浏览器和 JavaScript 运行时中得到广泛支持。
为了重点，手册将涵盖 ES 模块及其流行的前体 CommonJS module.exports = 语法，您可以在模块下的参考部分中找到有关其他模块模式的信息。
How JavaScript Modules are Defined
在 TypeScript 中，就像在 ECMAScript 2015 中一样，任何包含顶级导入或导出的文件都被视为一个模块。
相反，没有任何顶级导入或导出声明的文件被视为脚本，其内容在全局范围内可用（因此也对模块可用）。
模块在它们自己的范围内执行，而不是在全局范围内。 这意味着在模块中声明的变量、函数、类等在模块外部不可见，除非它们使用导出形式之一显式导出。 相反，要使用从不同模块导出的变量、函数、类、接口等，必须使用其中一种导入形式导入。
非模块
在我们开始之前，了解 TypeScript 将什么视为模块很重要。 JavaScript 规范声明任何没有导出或顶级 await 的 JavaScript 文件都应被视为脚本而不是模块。
在脚本文件中，变量和类型被声明为在共享全局范围内，并且假设您将使用 --outFile 编译器选项将多个输入文件连接到一个输出文件中，或者在其中使用多个
标记 您的 HTML 以加载这些文件（以正确的顺序！）。</div><div><br /></div><div>如果您有一个当前没有任何导入或导出的文件，但您希望被视为一个模块，请添加以下行：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Febabc10a0b994d988f4e23655269eaa6.png%22%2C%22originWidth%22%3A590%2C%22originHeight%22%3A678%2C%22name%22%3A%22image.png%22%2C%22size%22%3A47507%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A590%2C%22height%22%3A678%7D"></span></div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Fdfc67c04b9a74c9e9c43ae623a1764d0.png%22%2C%22originWidth%22%3A592%2C%22originHeight%22%3A446%2C%22name%22%3A%22image.png%22%2C%22size%22%3A47346%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A592%2C%22height%22%3A446%7D"></span></div><div>TypeScript’s Module Resolution Options</div><div>模块解析是从 import 或 require 语句中获取字符串并确定该字符串引用哪个文件的过程。</div><div><br /></div><div>TypeScript 包括两种解析策略：Classic 和 Node。 经典，当编译器标志模块不是 commonjs 时的默认值，包含在内是为了向后兼容。 Node 策略复制了 Node.js 在 CommonJS 模式下的工作方式，并额外检查了 .ts 和 .d.ts。</div><div><br /></div><div>有许多 TSConfig 标志会影响 TypeScript 中的模块策略：moduleResolution、baseUrl、paths、rootDirs。</div><div><br /></div><div>有关这些策略如何工作的完整详细信息，您可以查阅模块解决方案。</div><div><br /></div><div>TypeScript’s Module Output Options</div><div>有两个选项会影响发出的 JavaScript 输出：</div><div><br /></div><div>target 确定哪些 JS 功能被降级（转换为在较旧的 JavaScript 运行时中运行）以及哪些保持不变</div><div>module：确定模块之间使用哪些代码进行交互的模块</div><div>您使用的目标取决于您希望在其中运行 TypeScript 代码的 JavaScript 运行时中可用的功能。这可能是：您支持的最旧的 Web 浏览器，您希望运行或可能来自的最低版本的 Node.js 来自您的运行时的独特约束——例如 Electron。</div><div><br /></div><div>模块之间的所有通信都通过模块加载器进行，编译器标志模块确定使用哪一个。在运行时，模块加载器负责在执行之前定位并执行模块的所有依赖项。</div><div><br /></div><div>例如，这是一个使用 ES 模块语法的 TypeScript 文件，展示了模块的几个不同选项。</div><div><br /></div><div>下面是 TypeScript 原始文件：</div><div><span data-card-type="inline" data-ready-card="image" data-card-value="data:%7B%22src%22%3A%22https%3A%2F%2Fucc.alicdn.com%2Fpic%2Fdeveloper-ecology%2Ff2e37618f8344397a20e18a809dcae73.png%22%2C%22originWidth%22%3A585%2C%22originHeight%22%3A495%2C%22name%22%3A%22image.png%22%2C%22size%22%3A48554%2C%22display%22%3A%22inline%22%2C%22align%22%3A%22left%22%2C%22linkTarget%22%3A%22_blank%22%2C%22status%22%3A%22done%22%2C%22style%22%3A%22none%22%2C%22search%22%3A%22%22%2C%22margin%22%3A%7B%22top%22%3Atrue%2C%22bottom%22%3Atrue%7D%2C%22width%22%3A585%2C%22height%22%3A495%7D"></span></div>
