前端 - 如何阅读TypeScript的复杂interface?

Question

看到一个interface的声明，非常复杂：

interface PromiseLike<T> {
    /**
     * Attaches callbacks for the resolution and/or rejection of the Promise.
     * @param onfulfilled The callback to execute when the Promise is resolved.
     * @param onrejected The callback to execute when the Promise is rejected.
     * @returns A Promise for the completion of which ever callback is executed.
     */
    then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null): PromiseLike<TResult1 | TResult2>;
}

1、这个很难看懂，请问一下，应该如何学习这个定义呢?
是否可以拆分一点一点地学到它的含义？

2、需要带着什么样的思路才能去看懂，从想要定义它的目的去阅读吗？

Answer 1

最简单的方法是,写实际的例子去进行对比,当然前提是熟悉 promise 怎么使用

Answer 2

1、如何学习这个定义？

学习这个PromiseLike<T>接口的定义时，可以将其拆分为几个部分来理解：

• 接口名称与泛型参数：interface PromiseLike<T>表明这是一个接口，它接受一个泛型参数T，这个T代表了Promise解析成功时返回的值类型。
• 方法定义：接口内定义了一个方法then，这是Promise和类Promise对象的核心方法之一。
• 方法签名：then方法的签名相对复杂，因为它涉及到泛型的条件类型（TResult1 = T, TResult2 = never）以及多个可选参数（onfulfilled?, onrejected?）。

• 参数说明：

  • onfulfilled：当Promise成功解析时调用的函数，该函数可以返回一个新的值（TResult1类型）或一个新的PromiseLike<TResult1>对象。
  • onrejected：当Promise被拒绝时调用的函数，该函数可以返回一个新的值（TResult2类型）或一个新的PromiseLike<TResult2>对象。
• 返回值：then方法返回一个PromiseLike<TResult1 | TResult2>，即根据onfulfilled或onrejected的返回值类型，返回一个新的PromiseLike对象。

2、阅读复杂接口的思路

• 理解目的：首先明确接口设计的目的。对于PromiseLike<T>，其目的是提供一个与Promise类似行为的类型定义，允许非Promise对象也能拥有链式调用.then()的能力。

• 分步骤解析：

  • 泛型参数：理解泛型T的作用，即它代表什么。
  • 方法签名：逐个分析方法的参数和返回类型。特别是要注意参数的默认值、可选性，以及返回类型的计算方式。
  • 注释与文档：利用JSDoc注释理解每个参数和方法的意图。
• 关联知识：了解Promise的基本工作原理，特别是.then()方法的行为，对于理解PromiseLike<T>接口至关重要。
• 实践应用：通过编写代码示例来加深理解，尝试创建符合PromiseLike<T>接口的对象，并模拟其.then()方法的行为。

通过上述步骤，你可以逐步深入理解复杂接口的定义，并能够在自己的项目中灵活应用。