Typescript: Retrieve element type information from array type

by

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];

More Related Contents:

  1. How to define Typescript type as a dictionary of strings but with one numeric “id” property
  2. Could not find a declaration file for module ‘module-name’. ‘/path/to/module-name.js’ implicitly has an ‘any’ type
  3. How to suppress “error TS2533: Object is possibly ‘null’ or ‘undefined'”?
  4. Why does A | B allow a combination of both, and how can I prevent it?
  5. Typescript Discriminated Union allows invalid state
  6. Why can’t I return a generic ‘T’ to satisfy a Partial?
  7. Parameters generic of overloaded function doesn’t contain all options
  8. What does ‘declare’ do in ‘export declare class Actions’?
  9. “parserOptions.project” has been set for @typescript-eslint/parser
  10. How to use namespaces with import in TypeScript
  11. angular2 bootstrap with data from ajax call(s)
  12. Interface is allowing extra property when it is used as return type of a function
  13. Typescript: What’s the difference between an optional field and a union with undefined?
  14. Typescript has unions, so are enums redundant?
  15. Typescript: what is a “naked type parameter”
  16. Why do subtypes need to be assigned to a variable before being used as a function argument?
  17. Typescript narrowing of keys in objects when passed to function
  18. Typescript type T or function () => T usage
  19. Flatten object with custom keys in Typescript
  20. TypeScript empty object for a typed variable
  21. ts An async function or method in ES5/ES3 requires the ‘Promise’ constructor
  22. How to declare a function that throws an error in Typescript
  23. How to use enum as index key type in typescript?
  24. Typescript: Remove entries from tuple type
  25. Typescript: change function type so that it returns new value
  26. Check if object correctly implements interface
  27. What exactly $event object do in Angular 2?
  28. new Typescript “satisfies” operator
  29. What are the differences between the private keyword and private fields in TypeScript?
  30. Narrowing a return type from a generic, discriminated union in TypeScript

Leave a Comment