动态导入的 return 类型是什么？

Question

我有一个文件，必须异步加载，所以我做了一个函数，加载这个文件和return是 Promise:

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

这个函数的 return 类型是什么？ 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) };

demo.ts

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
dynamic imports
在 the React types

LazyExoticComponent

Answer 3

counter.ts:

export class Counter {}

export const list = ['test'];

index.ts:

type ImportClass<T, K extends keyof T> = T extends Record<K, infer S>
  ? S extends new (...args: any[]) => infer R
    ? R
    : never
  : never;

type ImportType<T, K extends keyof T> = T extends Record<K, infer R>
  ? R
  : never;

type Counter = ImportClass<typeof import('./counter'), 'Counter'>;

type List = ImportType<typeof import('./counter'), 'list'>;

Answer 4

在我的例子中，我能够像往常一样只导入类型，并动态导入我使用的实际类等。

例如，我有一个使用 import { ... } from "uWebSockets.js" 的 HttpModule.ts 即使它在我的内部库中，我实际上并没有使用 HttpModule.ts （但我的库将它包含在 index.ts） 我仍然遇到错误二进制文件 uWebSockets.js 缺少 using，换句话说，它加载了模块。

这是因为我有：

import uWS, {
    HttpRequest as uWSHttpRequest,
    HttpResponse as uWSHttpResponse,
    RecognizedString,
    us_socket_context_t
} from "uWebSockets.js";

更改为仅包括类型：

import {
    HttpRequest as uWSHttpRequest,
    HttpResponse as uWSHttpResponse,
    RecognizedString,
    us_socket_context_t
} from "uWebSockets.js";

跳过文件，什么时候初始化实际uWS我做了：

const app = (await import("uWebSockets.js")).App({});

现在，只有当我实际使用 HttpModule.ts 时，它才会导入 uWebSockets.js 模块。

动态导入的 return 类型是什么？

What's the return type of a dynamic import?

typescript

typescript2.4

my_module.ts

demo.ts

tsconfig.json（添加以供参考）

资源