1

Webpack 提供了一个 TypeScript 接口来实现一个加载器：

import { loader } from "webpack";

namespace loader {
  interface Loader extends Function {
      (this: LoaderContext, source: string | Buffer, sourceMap?: RawSourceMap): string | Buffer | void | undefined;
      pitch?(remainingRequest: string, precedingRequest: string, data: any): any;
      raw?: boolean;
  }
}

所以当我实现它时

const sfcLoader: loader.Loader = function(source: string) {
  /* ... */
};

现在我正在尝试创建一个接口，即该接口但返回一个 Promise：

const sfcLoader /* : loader.Loader */ = async function(source: string) {
  /* await ... */
};

注意async

当然我不想复制粘贴那个界面。有没有办法可以扩展（或其他）和修改 webpack 的界面？

4

1 回答 1

1

您需要根据您的加载器接口创建一个映射类型。这个想法是您需要使用关键字infer来访问函数的现有返回类型。在你的情况下，你需要将返回类型包装成 a Promise，我猜。在 TypeScript Playground 中尝试这个代码示例（我们为“TypeScript Quickly”一书编写了它）：

type ReturnPromise<T> =
    T extends (...args: infer A) => infer R ? (...args: A) => Promise<R> : T;   

type Promisify<T> = {
    [P in keyof T]: ReturnPromise<T[P]>;
};

interface SyncService {
    baseUrl: string; 
    getA(): string;
}

class AsyncService implements Promisify<SyncService> {
    baseUrl: string; 

    getA(): Promise<string> {
        return Promise.resolve('');
    }
}

let service = new AsyncService();


let result = service.getA(); // hover over result: it's of type Promise<string>

在这里，我们声明了一个新类型Promisify<T>。为了测试它，我们获取 interface SyncService，找到它的方法属性（getA()在这种情况下），并将其返回类型包装到Promise.

于 2019-03-26T16:54:35.190 回答