Bluebird / Typescript 错误：“this”的上下文不可分配给方法的“this”

Question

我有一系列方法（有些是异步的，有些不是），我想使用bluebird.each 来按顺序处理。这是一个简单的例子：

import bluebird from 'bluebird';

const delay = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
class Template {
  propertyA!: number;
  propertyB!: number;
  constructor() {}
  async methodA() {
    this.propertyA = 10;
    console.log({ thisArgInA: this, propertyA: this.propertyA });
    await delay(500);
    return this.propertyA;
  }
  methodB() {
    this.propertyB = this.propertyA * 100;
    console.log({ thisArgInB: this, propertyB: this.propertyB });
    return this.propertyB;
  }
}

const instance = new Template();

const sequence = [instance.methodA, instance.methodB];

(async function main() {
  await bluebird.each(sequence, (fn) => {
    const result = fn.call(instance);
    console.log({ result });
  });
})();

这会产生这个我不明白的错误：

index.ts:27:20 - error TS2684: The 'this' context of type '(() => Promise<number>) | (() => number)' is not assignable to method's 'this' of type '(this: Template) => Promise<number>'.
  Type '() => number' is not assignable to type '(this: Template) => Promise<number>'.
    Type 'number' is not assignable to type 'Promise<number>'.

27     const result = fn.call(instance);

我想可能是因为bluebird.each 接受解析为编译器无法协调的值的值或承诺，但我想到的唯一解决方案是强类型返回值”

async methodA: Promise<number> { /*...*/ }
methodB: number { /*...*/ }

但这并没有改变任何东西。我还注意到以下几点：

• 我必须在这里提供上下文，因为调用each 回调中的函数会失去与Template 的连接，因为this
• 当methodA同步时（去掉async关键字，去掉delay()，直接返回this.propertyA，就可以了。
• 当我删除 return 语句时，一切正常。
• 当我将 fn.call(instance) 更改为 fn.bind(instance)() 时，它工作正常

我怎样才能满足编译器的要求，让它知道如何使用提供的上下文调用这些函数。

有没有更简单的方法可以按顺序调用这些方法，从而保持它们与this 的连接？

StackBlitz Example

Answer 1

查看推断的类型可能会有所帮助：

• sequence: (((this: Template) => number) | ((this: Template) => Promise<number>))[] 或只是 ((() => Promise<number>) | (() => number))[]
• fn: ((this: Template) => number) | ((this: Template) => Promise<number>) 或只是 (() => Promise<number>) | (() => number)
• .call: <Template, [], number>(this: (this: Template) => number, thisArg: Template): number

我们可以看到.call() 表达式的类型不是我们所期望的——编译器想要一个返回number 的函数，并抱怨fn 可以返回Promise<number>。这可能是由于在处理推断函数联合类型的返回类型时出现的 TypeScript 错误。可能与subtle difference between X => A | B and (X => A) | (X => B)有关。

我们可以通过编写来解决这个问题

• const result = fn.call<Template,[],number|Promise<number>>(instance); 或
• …(fn: () => number | Promise<number>)) => … 或
• const sequence: (() => number | Promise<number>)[]