TypeScript 分布式条件类型 - 附加类型参数约束

Posted 2023-03-13

【中文标题】TypeScript 分布式条件类型 - 附加类型参数约束

【英文标题】：TypeScript Distributive Conditional Types - additional type parameter constraints

【发布时间】：2020-01-15 09:22:03

【问题描述】：

我正在尝试了解 TypeScript 2.8 中引入的条件类型并阅读以下官方文档。

https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-8.html

在分布式条件类型中，有一个例子

type BoxedValue<T> =  value: T ;
type BoxedArray<T> =  array: T[] ;
type Boxed<T> = T extends any[] ? BoxedArray<T[number]> : BoxedValue<T>;

type T20 = Boxed<string>;  // BoxedValue<string>;
type T21 = Boxed<number[]>;  // BoxedArray<number>;
type T22 = Boxed<string | number[]>;  // BoxedValue<string> | BoxedArray<number>;

在上面的例子中，我没有理解 T[number] 在 BoxedArray<T[number]>

它是指传递的数组的第一个元素还是这里发生了什么？

谁能帮我解释一下。

提前致谢。

【参考方案1】：

这是lookup types 的（另一种）用法。基本上将T[number] 视为任何数字索引可访问的任何元素的类型。

对于统一数组（每个元素都具有相同的类型），这与执行 T[0] 相同，它返回第一个元素的类型。

---

但情况并非总是如此。那是因为 TypeScript 还有tuples 的概念。

元组类型允许您用固定数量的元素表示数组，这些元素的类型是已知的，但不必相同。

假设我们有这个元组：

type Tuple = [string, number, string];

第一个元素和最后一个元素的类型为string，但第二个元素是number。使用查找类型，我们可以访问不同的索引：

Tuple[0] // -> string
Tuple[1] // -> number
Tuple[2] // -> string

因此，如果我们在查找类型中使用number，我们不会得到单个元素的类型，而是所有可能类型的联合：

Tuple[number] // -> string | number

【讨论】：

感谢您的详细解释。很有帮助。

【参考方案2】：

它是“lookup type”或“索引访问类型”。 A[B] 是使用 B 类型的键索引到 A 类型的对象时获得的值的类型。所以T[number] 是当你用数字键索引到T 类型的对象时得到的。请注意，只有在已知 T 具有 numeric index signature... 时，此类类型才会编译。例如，如果 T 是数组类型，则 T[number] 是数组元素的类型。

因此，T extends any[] ? BoxedArray<T[number]> : BoxedValue<T> 表示“对于T 的每个联合成员：如果它是数组类型，则生成其元素类型的BoxedArray；否则，生成它的BoxedValue，并将它们全部连接起来如示例所示。

希望有所帮助；祝你好运！

【讨论】：

谢谢你的详细解释，真的很有帮助。