Включение чистого метода объединения функций asyn c в TypeScript

Question

Я пытаюсь добиться чистой цепочки методов асин c функций в Typescript, делая их return this.

Вот мой класс:

class PaymentPage {

  async enterCreditCardMainDetails() {
    await t.typeText(this.someField, 'someText');
    return this;
  }

  async enterCreditCardAdditionalDetails() {
    await t.typeText(this.someField, 'someText');
    return this;
  }
}

Очевидно, когда я попробуйте вызвать эти методы, используя цепочку методов:

  async test() {
    await new PaymentPage()
      .enterCreditCardMainDetails()
      .enterCreditCardAdditionalDetails()
      .clickAddNewCardButton();
  }

Я получаю сообщение об ошибке: TS2339: Property 'enterCreditCardAdditionalDetails' does not exist on type 'Promise<PaymentPage>'.

Поэтому единственный найденный мной обходной путь - это обернуть каждый вызов метода с помощью await, однако результат не очень чистый (особенно когда используется много методов):

await (await (await new PaymentPage()
      .enterCreditCardMainDetails())
      .enterCreditCardAdditionalDetails())
      .clickAddNewCardButton();
  }

Есть ли способ реализовать цепочку методов более чистым и читаемым способом, например, путем изменения значения return this ?

Спасибо за внимание.

Answer 1

Вы, вероятно, хотите:

async test() {
  const paymentPage = await new PaymentPage();
  await paymentPage.enterCreditCardMainDetails();
  await paymentPage.enterCreditCardAdditionalDetails();
  await paymentPage.clickAddNewCardButton();
}