Typescript: Retrieve element type information from array type
Since 2.1, typescript supports [ ] operator for types. The official name is indexed access types, also called lookup types, and it works like this:
type A = {a: string, b: number} [];
type AElement = A[0];
let e: AElement = {x: 0}; //error TS2322: Type '{ x: number; }' is not
//assignable to type '{ a: string; b: number; }'
This can be achieved pretty easily by writting index type in brackets:
type ArrayElementType = ArrayType[number];
Update
As a comment below suggests, to create a generic array element type:
type ArrayElementType<ArrayType extends Array> = ArrayType[number];
P.S. number
is not a value but a type.
Another alternative:
type ArrayElement<A> = A extends readonly (infer T)[] ? T : never
Update: based on @jerico's answer below
The following type alias will return the type of the elements in an array or tuple:
type ArrayElement<ArrayType extends readonly unknown[]> =
ArrayType extends readonly (infer ElementType)[] ? ElementType : never;
So these examples would work:
type A = ArrayElement<string[]>; // string
type B = ArrayElement<readonly string[]>; // string
type C = ArrayElement<[string, number]>; // string | number
type D = ArrayElement<["foo", "bar"]>; // "foo" | "bar"
type E = ArrayElement<(P | (Q | R))[]>; // P | Q | R
type Error1 = ArrayElement<{ name: string }>;
// ^^^^^^^^^^^^^^^^
// Error: Type '{ name: string; }' does not satisfy the constraint 'readonly unknown[]'.
Explanation
The type guard (the bit in the angle brackets) ArrayType extends readonly unknown[]
says that we expect the type parameter ArrayType
to be at least a readonly array (it also accepts a mutable array) so that we can look at its element type.
This prevents passing in a non-array value, as in the final example, which prevents ArrayElement
ever returning never
.
Note that readonly unknown[]
is syntax added in TypeScript 3.4; for earlier versions use ReadonlyArray<unknown>
.
On the right-hand side, the conditional expression asks the compiler to fill in the value of ElementType
in the pattern readonly ElementType[]
and return ElementType
if it can, or never
if it can't.
Since the type guard at the beginning means we will only ever be passed a value which matches this pattern, it's guaranteed always to match and never to return never
.
Previous answer
type ArrayElement<ArrayType extends readonly unknown[]> = ArrayType[number];