Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to get type of array items?

Tags:

typescript

If I have a type type foo = Array<{ name: string; test: number; }>, would it be possible to get the type of the values within the array, in this case, the interface. I know there is keyof to get the keys, is there something similar for values?

like image 703
Alex Ngo Avatar asked Sep 23 '17 05:09

Alex Ngo


People also ask

Is typeof an array?

You shouldn't use the typeof operator to check whether a value is an array, because typeof cannot distinguish between arrays and objects. Instead you should use Array. isArray() , because typeof would return 'object' , not 'array' . Array.

Which array type is a collection of objects?

It includes Set , ArrayList , Queue , etc. You will not be wrong, an array is indeed a collection of objects, although like you said it does not implement the Collection interface. That said people usually refer to stuff that implements Collection when they say collection.

How do I get an element from an array?

get() is an inbuilt method in Java and is used to return the element at a given index from the specified Array. Parameters : This method accepts two mandatory parameters: array: The object array whose index is to be returned.

What is array type in TypeScript?

In typescript, an array is a data type that can store multiple values of different data types sequentially. Similar to JavaScript, Typescript supports array declaration and there are multiple ways to do it. Declaring and Initializing Arrays: We can either use var or let for declaring an array.


4 Answers

If you're looking to how to extract { name: string; test: number; } type, you can simply create alias to "item at index":

type Foo = Array<{ name: string; test: number; }>;
type FooItem = Foo[0];

or

type FooItem = Foo[number];
like image 77
Aleksey L. Avatar answered Oct 22 '22 02:10

Aleksey L.


Starting with TypeScript 2.8 you can also do this inline with the infer keyword:

type GetElementType<T extends any[]> = T extends (infer U)[] ? U : never;

For example:

// ElementType === string
type ElementType = string[] extends (infer U)[] ? U : never;

The infer keyword is very powerful and can extract any type out of larger type. For example if the type was a function that returns an array:

type FncType = () => [{ name: string }];

// Output === { name: string }
type Output = FncType extends () => (infer U)[] ? U : never;

You can also use the infer keyword in generic types:

type GetArrayReturnType<T> = T extends () => (infer U)[] ? U : never;

// Output === { name: string }
type Output = GetArrayReturnType<() => [{ name: string }]>;
like image 20
yeerk Avatar answered Oct 22 '22 01:10

yeerk


We can also use an indexed access operator like this:

const someArray = [
    {
        foo: '',
        bar: '',
        baz: ''
    },
    {
        foo: '',
        bar: '',
        baz: ''
    }
];

// indexed access operator
type SomeArray = typeof someArray[number];

There is a write-up on those here: https://www.typescriptlang.org/docs/handbook/advanced-types.html

The second operator is T[K], the indexed access operator.

like image 32
Shaun Luttin Avatar answered Oct 22 '22 00:10

Shaun Luttin


Despite Aleksey answer, it might be useful to know that if the instance of that generic type exposes at least one member of the type you want to extract, you could use typeof to query the type of that member.

For a generic Array the type can be queried from any array item: enter image description here

Note that line 27 only exists at design time so that will not generate any errors even if arr is empty or undefined at runtime.

like image 41
kbtz Avatar answered Oct 22 '22 02:10

kbtz