typescript 从 <variable> 导入而不是文字字符串？

Question

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import

导入时，是否可以在 Typescript 中将 from 路径动态设置为变量？

例如转这个：

import {HomeComponent} from './dashboard/home/home.component';

对于这样的事情：

let hompageComponentPath = './dashboard/home/home.component';
import * from hompageComponentPath;

Answer 1

随着动态import提案

在 ECMAScript 中有一个动态导入的提议。

从 TypeScript 2.4 开始，import可以使用动态表达式。下面是一个例子：

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

的import，用作函数，返回可被期待已久的一个承诺。

...但不是与 ES6 静态import/export

使用语法import/无法做到这一点，export因为 ES6 标准以静态方式显式定义了模块。

来自文章ES6 In Depth: Modules：

对于动态语言，JavaScript 已经让自己成为一个令人惊讶的静态模块系统。

• 所有风格的import和export只允许在模块的顶层。没有条件导入或导出，并且您不能import在函数范围内使用。
• 所有导出的标识符必须在源代码中按名称显式导出。您不能以编程方式遍历数组并以数据驱动的方式导出一堆名称。
• 模块对象被冻结。没有办法将一个新特性 hack 到一个模块对象中，polyfill 风格。
• 在任何模块代码运行之前，必须立即加载、解析和链接模块的所有依赖项。没有import可以按需延迟加载的语法。
• 错误没有错误恢复import。一个应用程序中可能有数百个模块，如果加载或链接失败，则不会运行任何内容。您不能在try/catch块中导入。（这里的好处是因为系统是静态的，webpack 可以在编译时为你检测这些错误。）
• 没有钩子允许模块在其依赖项加载之前运行一些代码。这意味着模块无法控制其依赖项的加载方式。