Unique Typescript syntax relating conditional generics and arrays

Question

I have stumbled upon a certain Typescript syntax, which I find confusing. Here are two examples which were written by members of the Typescript team.

Example 1

type BoxedArray<T> = { array: T[] };
type Boxed<T> = T extends any[] ? BoxedArray<T[number]> : BoxedValue<T>;
type T21 = Boxed<number[]>;  // BoxedArray<number>;

source

Here is how I'd naively read it:

// Boxed receives a type parameter - T = number[]
// Boxed passes BoxedArray an Array of T
// Therefore type T21 = BoxedArray<number[][]>

Example 2

type DeepReadonly<T> =
    T extends any[] ? DeepReadonlyArray<T[number]> :
    T extends object ? DeepReadonlyObject<T> :
    T;

interface DeepReadonlyArray<T> extends ReadonlyArray<DeepReadonly<T>> {}

source

I understand that this syntax is somewhat similar to infer. I have seen it here and there, but I still don't really understand the structure, and couldn't find information about it.

The type T[K] is a lookup type, meaning T[K] is the type of value of the property of T at key K. (Note that T[K] is not T[].) If T has a numeric index signature (like an array) then T[number] is the type of property stored at T's numeric index. If T is Array<X> then T[number] is X. — jcalz
– jcalz, Commented Jan 28, 2019 at 17:09
Thanks Jcalz, Your comment made the syntax very clear. Why did you comment instead of answer? — Ben Carp
– Ben Carp, Commented Jan 28, 2019 at 17:19

jcalz · Accepted Answer · 2019-01-28 17:23:00Z

1

The type T[K] is a lookup type, meaning T[K] is the type of value of the property of T at key K. (Note that T[K] is not T[].) If T has a numeric index signature (like an array) then T[number] is the type of property stored at T's numeric index. Specifically, if T is Array<X> then T[number] is X. (That does lead to the confusing looking string[][number] being the same as string). Hope that helps. Good luck!

answered Jan 28, 2019 at 17:23

jcalz

339k29 gold badges452 silver badges449 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Unique Typescript syntax relating conditional generics and arrays

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related