In Typescript how do you get an element type from an array type, when the array contains different element types?

Question

Let's assume I have an array of data that is of different types:

const input = ["random", 2, {a: "foo", b: "baz"}];

Typescript can automatically infer and extract the types, so for example:

type InputTypeArray = typeof input;

Here typescript knows that InputTypeArray is (string | number | {a: string, b: string})[];

Let's call InputType the type of the elements of the array, that is:

typeof InputType = string | number | {a: string, b: string};

Can I derive InputType from InputTypeArray? In other words, how I would write a function that accept one of the elements of the input as parameter?

const input = ["random", 2, {a: "foo", b: "baz"}];

const myFunction = (element: InputType) => element;

input.map(myFunction);

How do I write "InputType" here ? is there a way to extract it from input?

I know I could workaround by inlining myFunction inside the map call, as typescript will again infer the correct types inside the function. But is there a way to get the type neverthless?

Jamon Holmgren · Accepted Answer · 2020-12-21 20:44:38Z

56

You can use this format to get the member type:

type InputType = typeof input[number];

You can read more about it (and some other cool tips) here in Steve Holgado's blog article.

answered Dec 21, 2020 at 20:44

Jamon Holmgren

24.5k7 gold badges62 silver badges77 bronze badges

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

3 Comments

Tristan Reid Over a year ago

To me, this generic method seems a better solution than explicitly using an index (like input[0] given in another solution), since it won't fail when the array is empty.

Phil Over a year ago

Typescript infers a generic number anyway if you use an integer index, since we are talking about build time typings, not run time values. Consequently both syntaxes are logically equal. I agree that this is clearer though.

ADTC Over a year ago

When I saw how Prettier auto-formats this, I realized it's not exactly what we think it is. We may think it's getting [number] from input, then getting the type of input[number]. But in reality, it's actually getting the type of input then getting the type of [number] from that parent type. Ergo: type InputType = (typeof input)[number];. PS: This should be the accepted solution @mastrolindus

Fenton · Accepted Answer · 2018-02-09 10:26:50Z

26

You can extract it by pointing at an array member, so while you are using the below code to get the type of the array:

type A = typeof input;

You can use this to get the type of a single item:

type B = typeof input[0];

answered Feb 9, 2018 at 10:26

Fenton

253k74 gold badges404 silver badges414 bronze badges

2 Comments

mastrolindus Over a year ago

It was very trivial in the end :) I was expecting for some reasons that typeof input[0] would return string, as that is the type of the first element, but obviously it wouldn't make sense at a type-level. Thanks!

daiscog Over a year ago

You can also do type B = typeof input[number]

Collectives™ on Stack Overflow

In Typescript how do you get an element type from an array type, when the array contains different element types?

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related