如何在自定义Promise子类中使用async/await？

问题根源 #

TypeScript严格遵循ES规范，async函数的返回类型被强制约束为全局Promise<T>。即便你的自定义Promise子类（比如LoggingPromise）完全继承自原生Promise且运行时正常，TS类型检查仍会报错——因为它默认不允许将子类作为async函数的返回类型声明。

可行解决方法 #

1. 使用类型断言 #

在返回自定义Promise实例时，用as断言为目标子类类型，同时函数返回类型声明为Promise<T>以满足TS对async函数的要求；也可以直接声明返回子类类型，用// @ts-ignore跳过类型检查：

class LoggingPromise<T> extends Promise<T> {
  constructor(executor: (resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void) {
    super(executor);
    // 自定义日志逻辑
    this.then(() => console.log("Promise resolved"))
        .catch(() => console.log("Promise rejected"));
  }
}

// 方式1：兼容TS类型约束，返回时断言为子类
async function getResult(): Promise<string> {
  const data = await Promise.resolve("test");
  return new LoggingPromise(resolve => resolve(data)) as LoggingPromise<string>;
}

// 方式2：直接声明返回子类，跳过TS报错
// @ts-ignore
async function getResult2(): LoggingPromise<string> {
  const data = await Promise.resolve("test");
  return new LoggingPromise(resolve => resolve(data));
}

2. 函数重载 #

通过重载签名对外暴露自定义Promise子类的返回类型，内部实现签名使用Promise<T>满足TS的async函数约束：

// 对外暴露的重载签名，返回LoggingPromise
function fetchData(): LoggingPromise<string>;
// 内部实现签名，返回Promise
async function fetchData(): Promise<string> {
  const data = await Promise.resolve("test data");
  return new LoggingPromise(resolve => resolve(data));
}

// 调用时TS会识别返回类型为LoggingPromise
const result = fetchData();
result.then(data => console.log(data)); // 同时支持LoggingPromise的自定义方法

3. 封装自定义异步工具函数 #

放弃原生async/await语法，自己实现一个返回自定义Promise子类的异步工具函数，手动处理迭代器和异步流程：

function loggingAsync<T>(generator: () => Generator<Promise<any>, T, any>): LoggingPromise<T> {
  const gen = generator();
  function handleNext(value: any): LoggingPromise<any> {
    const result = gen.next(value);
    if (result.done) {
      return new LoggingPromise(resolve => resolve(result.value));
    } else {
      return new LoggingPromise(resolve => resolve(result.value)).then(handleNext);
    }
  }
  return handleNext(undefined);
}

// 使用示例
const asyncResult = loggingAsync(function* () {
  const data1 = await Promise.resolve("step1");
  const data2 = await Promise.resolve("step2");
  return data1 + data2;
});

asyncResult.then(res => console.log(res)); // 输出"step1step2"，且触发LoggingPromise的日志逻辑

注意事项 #

• 由于LoggingPromise继承自Promise，属于Promise的实例，所以async函数会直接返回该子类实例，这也是忽略报错后代码能正常运行的原因。
• 优先使用函数重载或类型断言的方式，既能满足TS类型检查，又能保留代码的可读性和类型安全。

内容的提问来源于stack exchange，提问作者Sasgorilla