Question

在此typescript book section中，作者通过以下示例解释了延迟加载：

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`.
}

根据作者的说明，只在第一次调用foo时加载require的类型，但在创建foo var时第二次调用时，它会加载所需的整个模块创建var _foo。

这是如何工作的。有人能否展示一个更详细的例子，说明幕后发生了什么？

Answer 1

Typescript 2.4现在支持Dynamic Import Expressions，您可以懒惰地导入模块。

以下是示例

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);

}

在引擎盖后面它还在使用＆＃34;要求＆＃34;正如您在transpiled code here

中看到的那样

Answer 2

typescript handbook

中提到过

编译器检测是否在发出的模块中使用了每个模块 JavaScript的。如果模块标识符仅用作类型的一部分注释，永远不作为表达，然后不需要调用为该模块发射。

在此示例中，第一个foo（没有下划线的那个）在类型注释中仅使用一次作为typeof的参数，因此第一个require('foo')被省略生成的javascript代码。您可以检查生成的.js文件以查看该文件，并且只有一次调用require的runtine，＆＃39; second＆＃39;一。

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

延迟模块加载如何在打字稿中工作？

2 个答案: