How to get type of array items?

后端 未结 5 1021
有刺的猬
有刺的猬 2020-11-29 10:03

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

相关标签:
5条回答
  • 2020-11-29 10:34

    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];
    
    0 讨论(0)
  • 2020-11-29 10:36

    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:

    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.

    0 讨论(0)
  • 2020-11-29 10:43

    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.

    0 讨论(0)
  • 2020-11-29 10:46

    Using the popular utility-types library:

    type foo = Array<{ name: string; test: number; }>
    
    type fooElements = ValuesType<foo>
    // = { name: string; test: number; }
    

    See https://www.npmjs.com/package/utility-types#valuestypet

    0 讨论(0)
  • 2020-11-29 10:55

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

    type GetElementType<T extends Array<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 }]>;
    
    0 讨论(0)
提交回复
热议问题