画图理解 TypeScript 的 infer 关键字

预先说明

本文不是探讨 infer 关键字的用法、细节，因为很多文章、书籍都有详细讲解。
但是在我学习的过程中，很多资料都是文字描述，我也是思索良久才理解该关键字的含义。因此，我打算用画图的方式来说明如何理解 infer 关键字。

另外，在阅读本文之前最好已经了解过 infer 关键字的相关内容，因为下面例子中的部分描述不够严谨：

• 比如我把 A extends B 说成是 A 是 B。
• 比如把对象的声明说成是对象等等。
• 这是考虑到如果详细描述会占用更多篇幅，而本文的重点是理解 infer 的推测逻辑，故简化了描述 —— 特此说明。

---

例子 1

type E<T, U> = T extends U[] ? U : T;
// 如果不使用自动推测，则需要手动添加新的泛型参数
type A = E<number[], number>;

---

例子 2

type MyType<T, M, N> =
    T extends {
        a: M,
        b: N
    } ? [M, N] : never;

// 如果不使用这种自动类型推测，那么必须手动指定类型
type T = MyType<{ a: string; b: number }, string, number>;
// T 为 [string, number]

---

例子 3

---

总结

最后强调，上文的重点在于理解 infer 的推测方式，所以并没有严谨阐述细节，读者还需要多看书进行实践，如果看不懂书中代码，可以根据上文的过程比划一下也能快速理解了。