javascript - 如何正确输入这个 `makeCancellable`函数并使Flowtype停止提示？

Question

我有一个以下函数可以取消 Promise。正如你所看到的，我定义了一个 CancellablePromise扩展原来的接口(interface)Promise我有一些标记为 %checks 的类型检查函数检查一个值是否是一个 Promise 或者它是否已经是一个可取消的 Promise。主makeCancellable函数应该采用 Promise作为参数并返回 CancellablePromise 。一切都按预期工作，但我必须使用 $FlowFixMe在 3 个地方添加注释，因为无论我尝试什么，Flow 都会提示。 (请阅读下面代码中的注释，了解 Flow 提示的是什么)。

最让我烦恼的是第一个isCancellable检查我在哪里检查 promise 是否已经是 CancellablePromise 。奇怪的是，如果我标记函数的 originalPromise参数为 any ，如CancellablePromise<*> | number或者其他什么，类型检查系统看到 isCancellable函数是类型保护并停止提示。当 originalPromise参数的类型如下面的代码示例所示，不知何故 Flow 忽略了 isCancellable 的事实是一个正确键入的类型保护并开始提示，就像%checks一样类型保护不存在。

如果有任何帮助，我将不胜感激。前段时间我使用 TypeScript 时没有遇到这样的问题 - 类型保护和类型转换在那里工作得很好，但不知何故我无法让 Flow 合作。

interface CancellablePromise<T> extends Promise<T> {
    cancel: Function
};

function isThenable(value: any): boolean %checks {
    return typeof value === 'object' && 'then' in value;
}

function isCancellable(promise: any): boolean %checks {
    return isThenable(promise) && 'cancel' in promise;
}

function makeCancellable(originalPromise: CancellablePromise<*> | Promise<*>): CancellablePromise<*> {
    if (isCancellable(originalPromise)) {
        // $FlowFixMe
        return originalPromise; // <- complains here because Promise type does not have `cancel` method, ignores the isCancellable %checks
    }

    let resolvePromise;
    let rejectPromise;
    let cancelled = false;

    const cancellable = new Promise((resolve, reject) => {
        resolvePromise = resolve;
        rejectPromise = reject;
    });

    // $FlowFixMe
    // Complains here because Promise cannot have 'cancel' method
    // Typecasting with (cancellable: CancellablePromise<*> does not work
    cancellable.cancel = () => {
        cancelled = true;
    }

    originalPromise.then(result => {
        cancelled || resolvePromise(result);
    }).catch(reason => {
        cancelled || rejectPromise(reason);
    });

    // $FlowFixMe
    // Complains here because Promise lacks 'cancel' method because adding the method and typecasting does not work
    return cancellable;
};

Answer 1

问题是 Promise 是一个类，而 Flow 中的类是名义类型(与 Typescript 不同，在 Typescript 中它们是接口(interface)等结构类型)。在 Flow 中，将字段添加到类类型的唯一方法是创建子类。例如，

class CancellablePromise<T> extends Promise<T> {
    cancelled = false;
    cancel() { this.cancelled = true; }
};

您还可以使用 then 和 cancel 签名定义一个接口(interface)。扩展类的接口(interface)的问题在于，接口(interface)类型的任何值都必须是 Promise 的实例或 Promise 的子类。这降低了接口(interface)相对于子类的有用性。在 Typescript 中，类可以用作接口(interface)，但 Flow 在这方面的工作方式有所不同。

CancellablePromise的子类形式可以直接实例化:

const cancellable = new CancellablePromise((resolve, reject) => {
    resolvePromise = resolve;
    rejectPromise = reject;
});