动态导入的返回类型是什么？

Question

我有一个必须异步加载的文件，所以我创建了一个函数，它加载这个文件并返回Promise：

export function load() {
    // ...
    return import(filename);
}

这个函数的返回类型是什么？Promise<any>有效，但感觉很奇怪。我想把签名写成这样。

export function load() -> Promise<???>;

Answer 1

您需要使用导入类型和 TypeScript 2.9或更高版本。下面是一个例子：

my_module.ts

export const user = { name: "John", age: 30 };
export const event = { name: "Birthday", date: new Date(1989, 13, 2) };

演示文件

type ModuleType = typeof import("./my_module"); // This is the import type!

export function load(): Promise<ModuleType> {
    // ...
    return import("./my_module");
}

(async () => {
    const module = await load();
    console.log(module.user.age); // It works!
})();

tsconfig.json（添加以供参考）

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "lib": [
      "es2015",
      "dom"
    ], 
    "strict": true,  
    "esModuleInterop": true
  }
}

Answer 2

在最新的 React 中，动态导入类型是：

type DynamicImportType = () => Promise<{ default: React.ComponentType<any>; }>;
type LazyComponentType = React.LazyExoticComponent<React.ComponentType<any>>;

const dynamicImport: DynamicImportType = () => import('./MyComponent');
const LazyComponent: LazyComponentType = React.lazy(dynamicImport);

资源

• React.lazy
• 动态导入
• 在React 类型中搜索“ LazyExoticComponent”