What is the best way to retrieve a data type from an array using typescript?

Question

What is the best way to retrieve a data type from an array using typescript?

Can Typescript automatically declare a type that retrieves the inner type of an array?

For instance:

Assume the following code snippet already exists:

export interface Cache {
    events: Event[],
    users: User[]
}
type CacheType = Event[] | User[];

//or maybe: 
//   type TypeOfProperty = T[keyof T];
//   type CacheType = TypeOfProperty<Cache>;

What I am looking for is something like this:

type InnerCacheType = Event | User;

But without the need to manually update it every time a new item is added to Cache or CacheType

Is this functionality supported in Typescript?

typescript types

Answer 1

Answer №1

If you're using Typescript 2.8 or later, you have the ability to define an Unpacked<T> type in the following manner:

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

With this definition in place, you can then utilize it like this:

type InnerDataType = Unpacked<DataType>; // Event | User

This concise explanation of the Unpacked type is provided in the official TypeScript documentation.

Answer 2

If you're using Typescript 2.8 or later, you have the ability to define an Unpacked<T> type in the following manner:

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

With this definition in place, you can then utilize it like this:

type InnerDataType = Unpacked<DataType>; // Event | User

This concise explanation of the Unpacked type is provided in the official TypeScript documentation.

Answer 3

Answer №2

An alternate method to achieve the same result is by using a type query. For example:

type CacheType = Event[] | User[];
type InnerCacheType = CacheType[number]; // Event | User

Visit TypeScript Playground

Check out this comment from the TypeScript development team

The following expression is valid:
const t: Array<string>[number] = "hello";
which is equivalent to const t: string

Thus, this statement will always remain true.

Answer 4

An alternate method to achieve the same result is by using a type query. For example:

type CacheType = Event[] | User[];
type InnerCacheType = CacheType[number]; // Event | User

Visit TypeScript Playground

Check out this comment from the TypeScript development team

The following expression is valid:
const t: Array<string>[number] = "hello";
which is equivalent to const t: string

Thus, this statement will always remain true.

Answer 5

Answer №3

Assuming you have TypeScript 2.1 or a higher version, achieving your desired outcome is not possible without it.

It is crucial to understand that you are assuming all properties of the Cache interface will be arrays. Without this assumption, your question loses its meaning, so we will proceed based on this assumption.

Essentially, the CacheType can be defined as

type CacheType = Cache[typeof Cache];

while also including any inherited properties. This resulting type is essentially Event[] | User[], however, it is impractical to separate the array components from this union type.

To tackle this, mapped types come into play. The desired InnerCacheType can be formulated as

type InnerCacheType = MappedCacheType[typeof MappedCacheType];

where

type MappedCacheType = { [P in keyof Cache]: Cache[P][0]; };

In essence, the final type is represented as

{ events: Event; users: User; }

It's important to note that TypeScript retains the original names in this process.

To sum it up, disregarding your specific scenario, the method to express the component type of an array type T is T[0].

Answer 6

Assuming you have TypeScript 2.1 or a higher version, achieving your desired outcome is not possible without it.

It is crucial to understand that you are assuming all properties of the Cache interface will be arrays. Without this assumption, your question loses its meaning, so we will proceed based on this assumption.

Essentially, the CacheType can be defined as

type CacheType = Cache[typeof Cache];

while also including any inherited properties. This resulting type is essentially Event[] | User[], however, it is impractical to separate the array components from this union type.

To tackle this, mapped types come into play. The desired InnerCacheType can be formulated as

type InnerCacheType = MappedCacheType[typeof MappedCacheType];

where

type MappedCacheType = { [P in keyof Cache]: Cache[P][0]; };

In essence, the final type is represented as

{ events: Event; users: User; }

It's important to note that TypeScript retains the original names in this process.

To sum it up, disregarding your specific scenario, the method to express the component type of an array type T is T[0].

What is the best way to retrieve a data type from an array using typescript?

Answer №1

Answer №2

Answer №3

Similar questions

The error message "tsc not found after docker image build" appeared on the

Is it possible to set up tsc to compile test specifications specifically from a designated directory?

Is there a way for me to steer clear of using optional chaining in Typescript?

Jest encounters issues while attempting to execute TypeScript test cases

Error: Attempting to change a read-only property "value"

Struggling with transitioning from TypeScript to React when implementing react-data-grid 7.0.0

Showing Firebase messages in a NativeScript ListView in an asynchronous manner

Utilize ngx-filter-pipe to Streamline Filtering of Multiple Values

Received an unexpected argument count of 1 instead of the expected 0 while passing a function as a prop to a child component

The data type 'StaticImageData' cannot be converted to type 'string'

Deploying Firebase functions results in an error

Using WebdriverIO with Angular to create end-to-end tests in TypeScript that involve importing classes leads to an error stating "Cannot use import statement outside a module."

I am currently struggling with a Typescript issue that I have consulted with several individuals about. While many have found a solution by upgrading their version, unfortunately, it

Utilizing Typescript for Efficient Autocomplete in React with Google's API

Exploring Realtime Database Querying with Firebase 5.0

Injecting a component in Angular 2 using an HTML selector

What is the best way to add a custom typeguard to an object in TypeScript?

Trying to access a private or protected member 'something' on a type parameter in Typescript is not permitted

Routing with nested modules in Angular 2 can be achieved by using the same

Filter array to only include the most recent items with unique names (javascript)