Say I have some array type T[], is it possible to extract the type T within another alias / interface? For example my (fake) ideal code would be as follows:
// for illustration only...
type ArrayElement<T[]> = T;
// then, ArrayElement<string[]> === string
If no, are there general type theory reasons for not allowing such an operator? If no again, I might suggest it be added.
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];
[number,string]. So this answer has some advantages as ArrayElement<[number,string]> -> number | string--noUncheckedIndexedAccess flag is enabled, whereas @jerico's answer wouldn't. That'd be enough of a reason for me to choose that answer over my one, which is a little sad since ArrayType[number] is much easier to read, especially for beginners.
ArrayType[number]) still works fine, even with --noUncheckedIndexedAccess enabled. That flag does not affect these type-level operations.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; }'
{ x: number; } is still not assignment-compatible with the type of array element
YourArray[number] is indeed the canonical solution.
let e: AElement = { a: 'A', b: 1 }; // okAnother alternative:
type ArrayElement<A> = A extends readonly (infer T)[] ? T : never
--noUncheckedIndexedAccess flag
P[] | (Q | R)[]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<T>, T = any> = ArrayType[number];
P.S. number is not a value but a type.
type ArrayElementType<A extends Array> = A[number]
Generic type 'Array<T>' requires 1 type argument(s).type ArrayElementType<ArrayType extends Array<T>, T = any> = ArrayType[number]; But it's no more a nice short answer. Plus it has this extra type parameter T.Another option:
type Flatten<Type> = Type extends Array<infer Item> ? Item : Type;
You can find more about infer at:
https://www.typescriptlang.org/docs/handbook/2/conditional-types.html#inferring-within-conditional-types:
Using conditional types this snippet flattens array types to their element types, or leaves them alone otherwise
type Flatten<T> = T extends any[] ? T[number] : T;
Implementing the snippet above type Str below will have a type of string
// Extracts out the element type.
type Str = Flatten<string[]>;
and type Num below will remain it's original type number
// Leaves the type alone.
type Num = Flatten<number>;
In summary when Flatten is given an array type, it uses an indexed access with number to fetch out string[]’s element type. Otherwise, it just returns the type it was given. This example was sourced from the Typescriptlang handbook on conditional types
The utility-type library has a type for that https://github.com/piotrwitek/utility-types#valuestypet (along with many others)
For example
import { ValuesType } from 'utility-types';
type NumberArray = number[];
// Expect: number
type NumberItems = ValuesType<NumberArray>;
The type-fest library calls this an IterableElement<T> and it allows to extract the element type of any Iterable or AsyncIterable, including arrays and generators:
type MyArray = Array<number>;
type MyArrayElements = IterableElement<MyArray>;
Based on @will-madem's answer, I've done a couple of tweaks:
T or T[]T[][][] => Ttype ArrayElement<MaybeArrayType> =
MaybeArrayType extends readonly (infer ElementType)[]
? (
ElementType extends unknown[]
? ArrayElement<ElementType>
: ElementType
)
: MaybeArrayType;
