惰性模块加载在打字稿中如何工作？

Question

在此打字本书籍部分中，作者使用以下示例解释延迟加载：

import foo = require('foo');

export function loadFoo() {
    // This is lazy loading `foo` and using the original module *only* as a type annotation
    var _foo: typeof foo = require('foo');
    // Now use `_foo` as a variable instead of `foo`.
}

根据作者的说法，typescript仅foo在首次调用时加载类型，require但在foo创建var 时在第二次调用时加载创建所需的整个模块var _foo。

这是如何运作的。有人可以显示引擎盖下发生的事情的更详细示例吗？

Answer 1

typescript手册中提到了

编译器会检测每个模块是否在发出的 JavaScript 中使用。如果模块标识符仅用作类型注释的一部分而不用作表达式，则不会为该模块发出 require 调用。

在此示例中，第一个foo（没有下划线的）在类型注释中仅作为 的参数使用一次，因此生成的 javascript 代码中省略了typeof第一个。require('foo')您可以检查生成的.js文件来查看这一点，并且只有一次对requireat runtine 的调用，即“第二个”调用。

当loadFoo()被调用时，require('foo')被执行，调用内置的node.js函数，该函数在运行时以通常的方式require()加载模块。foo

Answer 2

Typescript 2.4现在支持动态导入表达式，您可以在其中延迟导入模块。

这是示例：

async function getZipFile(name: string, files: File[]): Promise<File> {
    const zipUtil = await import('./utils/create-zip-file');
    const zipContents = await zipUtil.getContentAsBlob(files);
    return new File(zipContents, name);
}

在引擎盖后面，它仍在使用，require如您在此处已转换的代码中所见