如何阅读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 怎么使用。

type IsEqual<T1, T2> = T1 extends T2 ? (<G>() => G extends T1 ? 1 : 2) extends <G>() => G extends T2 ? 1 : 2 ? true : false : false
type AnyIsEqual<T1, T2> = T1 extends T2 ? IsEqual<T1, T2> extends true ? true : never : never
type BrowserNativeObject = Date | FileList | File
type Primitive = null | undefined | string | number | boolean | symbol | bigint
type PathImpl<K extends string | number, V, TraversedTypes> = V extends Primitive | BrowserNativeObject ? `${K}` : true extends AnyIsEqual<TraversedTypes, V> ? `${K}` : `${K}` | `${K}.${PathInternal<V, TraversedTypes | V>}`
type TupleKeys<T extends ReadonlyArray<any>> = Exclude<keyof T, keyof any[]>
type ArrayKey = number
type PathInternal<T, TraversedTypes = T> = T extends ReadonlyArray<infer V> ? IsTuple<T> extends true ? {
  [K in TupleKeys<T>]-?: PathImpl<K & string, T[K], TraversedTypes>;
}[TupleKeys<T>] : PathImpl<ArrayKey, V, TraversedTypes> : {
  [K in keyof T]-?: PathImpl<K & string, T[K], TraversedTypes>;
}[keyof T]
type Path<T> = T extends any ? PathInternal<T> : never

这个例子看起来就非常复杂,但是如果写一个例子放上去,很容易就知道这是做什么,如果不写例子估计看半天都不知道干什么的

Answer 2

试试在 vscode 安装 ts-type-expand

https://github.com/d-kimuson/ts-type-expand

Answer 3

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>(
//      ^ 尖括号之间是泛型                ^
//       ^^^^^^^^^^^^ 第一个类型参数是 TResult1，默认类型为 T（即 interface 中定义的泛型 T）
//                     ^^^^^^^^^^^^^^^^ 第二个类型参数是 TResult2，默认类型是 never
        onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
//      ^^^^^^^^^^^ then 函数的第一个参数，冒号后面是这个参数的类型
//                    ^                                              ^ ^           ^ 参数类型是 3 个类型的联合
//                     ^         ^^^^^  从这个特征可以看出来这是一个函数类型（回调）
//                                                                     ^^^^^^^^^^^^^^^^^^ 这两个类型不用多说了
//                      ^^^^^^^^ 函数参数是 T，也就是 PromiseLike<T> 带出来的值类型
//                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 结果回调处理的结果，TResult1 或者 PromiseLike<TResult1>
//                                                                    因为 TResult1 是个泛型，所以存在 undefined 或者 null 的
//                                                                    可能性。undefined 就是常见没有返回值的情况
        onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
//                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
//                                 参考上面的类型分析，这里 TResult2 表示 resolve 和 reject 可能会处理不同的类型
//                                 实际也是，resolve 的是正常值，而 reject 出来的通常是一个错误对象
    ): PromiseLike<TResult1 | TResult2>;
//                 ^^^^^^^^^^^^^^^^^^^ 因为 then 处理了 resolve 和 reject 的情况，所以有可能是两种类型的返回值
}

Answer 4

可以了解 type-challenges 这个项目，这个项目有涉及很多复杂类型的定义，很多人给了不同的实现和这样子写的理由，可以由浅及深，一开始就来那么复杂是比较难看懂的，了解一些简单结构的原理，后面看到复杂的结构会慢慢发现也是从几个简单的结构组成，这个 PromiseLike 里面也有