Mapping a Tuple to a different Tuple type in Typescript 3.0: Step-by-step guide

Question

Mapping a Tuple to a different Tuple type in Typescript 3.0: Step-by-step guide

I am working with a tuple of Maybe types:

class Maybe<T>{ }

type MaybeTuple = [Maybe<string>, Maybe<number>, Maybe<boolean>];

and my goal is to convert this into a tuple of actual types:

type TupleIWant = [string, number, boolean];

So, I attempted the following approach:

type ExtractTypes<T> = T extends Maybe<infer MaybeTypes>[] ? MaybeTypes : never;

type TypesArray = ExtractTypes<MaybeTuple>; // string | number | boolean NOT [string, number, boolean]

Unfortunately, this solution did not yield the desired outcome.

Instead of getting the tuple [string, number, boolean], I ended up with (string | number | boolean)[]

Is it currently possible to achieve what I intended to do?

typescript typescript3.0

Answer 1

Answer №1

To tackle this issue, leverage a mapped tuple type, which gains support in TypeScript 3.1.

Crafting a mapped type with properties such as 0, 1, 2, and length of precise types is feasible, as demonstrated below:

class Maybe<T> {}

type MaybeTuple = [Maybe<string>, Maybe<number>, Maybe<boolean>];

type MaybeType<T> = T extends Maybe<infer MaybeType> ? MaybeType : never;
type MaybeTypes<Tuple extends [...any[]]> = {
  [Index in keyof Tuple]: MaybeType<Tuple[Index]>;
} & {length: Tuple['length']};

let extractedTypes: MaybeTypes<MaybeTuple> = ['hello', 3, true];

If your TypeScript version is outdated, consider using an unreleased version or resort to creating a conditional type that aligns with expected tuples numbers, like the one showcased here.

Answer 2

To tackle this issue, leverage a mapped tuple type, which gains support in TypeScript 3.1.

Crafting a mapped type with properties such as 0, 1, 2, and length of precise types is feasible, as demonstrated below:

class Maybe<T> {}

type MaybeTuple = [Maybe<string>, Maybe<number>, Maybe<boolean>];

type MaybeType<T> = T extends Maybe<infer MaybeType> ? MaybeType : never;
type MaybeTypes<Tuple extends [...any[]]> = {
  [Index in keyof Tuple]: MaybeType<Tuple[Index]>;
} & {length: Tuple['length']};

let extractedTypes: MaybeTypes<MaybeTuple> = ['hello', 3, true];

If your TypeScript version is outdated, consider using an unreleased version or resort to creating a conditional type that aligns with expected tuples numbers, like the one showcased here.

Answer 3

Answer №2

To avoid inadvertently mapping over unnecessary keys like push, length, etc., it is important to exclude the non-index keys of the array:

type NumStrDate = [number, string, Date]
type IdxOf<T extends any[]> = Exclude<keyof T, keyof any[]>
type OrUndef<T extends any[]> = {[K in IdxOf<T>]: T[K] | undefined}
type MaybeNSD = OrUndef<NumStrDate>

const fine: MaybeNSD = [5, 'foo', undefined]
const problem: MaybeNSD = ['foo', undefined, undefined]

If you mouse over MaybeNSD, it will display the resolved interpretation:

type MaybeNSD = {
    0: number | undefined;
    1: string | undefined;
    2: Date | undefined;
}

playground link

Answer 4

To avoid inadvertently mapping over unnecessary keys like push, length, etc., it is important to exclude the non-index keys of the array:

type NumStrDate = [number, string, Date]
type IdxOf<T extends any[]> = Exclude<keyof T, keyof any[]>
type OrUndef<T extends any[]> = {[K in IdxOf<T>]: T[K] | undefined}
type MaybeNSD = OrUndef<NumStrDate>

const fine: MaybeNSD = [5, 'foo', undefined]
const problem: MaybeNSD = ['foo', undefined, undefined]

If you mouse over MaybeNSD, it will display the resolved interpretation:

type MaybeNSD = {
    0: number | undefined;
    1: string | undefined;
    2: Date | undefined;
}

playground link

Mapping a Tuple to a different Tuple type in Typescript 3.0: Step-by-step guide

Answer №1

Answer №2

Similar questions

Error encountered in Typescript while attempting to $set a subdocument key value in MongoDB

tips for sending types as properties in a versatile component

Modify the property of the ChildComponent by utilizing the ViewChild method

Module 'next-intl/client' cannot be located

Determination of the input parameters

Launching Nest.js application from Visual Studio Code

Multiple asynchronous calls in Angular 2

What is the best way to test chained function calls using sinon?

Managing empty functions as properties of an object in a React, Redux, and Typescript environment

Detecting the language of a browser

What is the best way to convert the reader.result into a string?

Attempting to perform an API invocation on a distant endpoint utilizing NestJS

Is it possible for a component to have multiple templates that can be switched based on a parameter?

Can you provide a guide on setting up and utilizing mathlive within NuxtJS?

What is the reason behind RematchDispatch returning a `never` type when a reducer and an effect share the same name?

Tips on avoiding updates to a defined object when a new object is filtered (created from the original object)

The TypeScript compiler is attempting to fetch node modules in the browser while compiling a single output file

Exploring the latest upgrades in React 18 with a focus on TypeScript integration

Converting JSON to TypeScript with Angular Casting

Convert image file to a React TypeScript module for export