在 TypeScript 的异步函数中返回一个 Promise

Question

据我了解，这两个函数在 JavaScript 中将具有相同的行为：

const whatever1 = (): Promise<number> => {
    return new Promise((resolve) => {
        resolve(4);
    });
};

const whatever2 = async (): Promise<number> => {
    return new Promise((resolve) => {
        resolve(4);
    });
};

但 TypeScript 似乎不喜欢第二个，它说：

Type '{}' is not assignable to type 'number'.

这是 TypeScript 中的错误，还是我对异步函数有误解？

Answer 1

这很复杂。

首先，在这段代码中

const p = new Promise((resolve) => {
    resolve(4);
});

p 的类型被推断为Promise<{}>。 typescript github上有open issue关于这个，所以可以说这是一个错误，因为显然（对于人类），p应该是Promise<number>。

那么，Promise<{}> 与Promise<number> 兼容，因为基本上一个promise 的唯一属性是then 方法，而then 在这两种promise 类型中是兼容typescript rules for function types compatibility 的。这就是whatever1没有错误的原因。

但是async 的目的是假装你在处理实际值，而不是承诺，然后你在whatever2 中得到错误，因为{} 显然与number 不兼容。

所以async 的行为是相同的，但目前需要一些解决方法来使 typescript 编译它。在创建这样的 Promise 时，您可以简单地提供显式的泛型参数：

const whatever2 = async (): Promise<number> => {
    return new Promise<number>((resolve) => {
        resolve(4);
    });
};

Answer 2

当您执行new Promise((resolve)... 时，推断的类型是Promise<{}>，因为您应该使用new Promise<number>((resolve)。

有趣的是，这个问题仅在添加 async 关键字时才突出显示。我建议将此问题报告给 TS 团队on GitHub。

您可以通过多种方式解决此问题。以下所有函数具有相同的行为：

const whatever1 = () => {
    return new Promise<number>((resolve) => {
        resolve(4);
    });
};

const whatever2 = async () => {
    return new Promise<number>((resolve) => {
        resolve(4);
    });
};

const whatever3 = async () => {
    return await new Promise<number>((resolve) => {
        resolve(4);
    });
};

const whatever4 = async () => {
    return Promise.resolve(4);
};

const whatever5 = async () => {
    return await Promise.resolve(4);
};

const whatever6 = async () => Promise.resolve(4);

const whatever7 = async () => await Promise.resolve(4);

在您的 IDE 中，您将能够看到所有这些函数的推断类型是 () => Promise<number>。