Combining tuples with their corresponding data types

Question

Combining tuples with their corresponding data types

Trying to define a new type:

type Union = [1, "one"] | [1, "first"] | [2, "two"]

type GetTuple<T, U> = Extract<T, [U, ...unknown[]]>;

type ObjectFromUnion<T extends Union[0] = Union[0]> = {
  number: T,
  word: ??
}

Looking to utilize the ObjectFromUnion type as props for a React component without specifying a generic type, letting it infer based on the values of number and word props.

Expected behavior:

<Component number={1} word=/* "one" or "first" */ /> 
<Component number={2} word=/* "two" */ /> 
<Component word="one" number=/* {1} */ /> 
<Component word="first" number=/* {1} */ /> 
<Component word="two" number=/* {2} */ />

typescript typescript-generics

Answer 1

Answer №1

If you want to achieve this, consider leveraging mapped types.

type Choices = [1, "one"] | [1, "first"] | [2, "two"];
type ChosenType = {[Key in Choices as Key[0]]: Key[1]};

function ShowComponent<Index extends keyof ChosenType>(properties: {number: Index; word: ChosenType[Index]}) {
    return <div>{properties.number}: {properties.word}</div>
}

Check out this live example on the playground.

Once you input the number, you'll witness narrowing and autocomplete suggestions for the word.

Answer 2

If you want to achieve this, consider leveraging mapped types.

type Choices = [1, "one"] | [1, "first"] | [2, "two"];
type ChosenType = {[Key in Choices as Key[0]]: Key[1]};

function ShowComponent<Index extends keyof ChosenType>(properties: {number: Index; word: ChosenType[Index]}) {
    return <div>{properties.number}: {properties.word}</div>
}

Check out this live example on the playground.

Once you input the number, you'll witness narrowing and autocomplete suggestions for the word.

Combining tuples with their corresponding data types

Answer №1

Similar questions

Solving the "ExpressionChangedAfterItHasBeenCheckedError" in Ionic: A Guide

Developing applications using the combination of Vue.js, JSX, and

Unnecessary Attributes in Type that Should be Automatically Inherited by Child Component

Can you explain the significance of the "@" symbol in the `import from '@/some/path'` statement?

Tips on converting a date string in the format 'dd/MM/yyyy' to a date type using TypeScript

Adding a new document to an existing collection with an array field in MongoDB

"Utilizing the range option in a NodeJS request proves ineffective when attempting to stream HTML5

Angular: Streamlining the Constructor Function for Efficiency

Unexpected patterns observed when utilizing parent/child routing files

Using Typescript, develop a function within an entity to verify the value of a property

The parameter type '{ src: string; thumb: string; }' cannot be assigned to the 'never' type in the argument

A guide on converting JSON to TypeScript objects while including calculated properties

Retrieving information from the sessionStorage within app.module.ts

Using React with Typescript involves using the React.createElement method

Refreshing the cache in SWR, but the user interface remains unchanged inexplicably - SWR hook in Next.js with TypeScript

What causes an undefined error to occur when setting default values after destructuring and assigning props in JavaScript?

I am having trouble locating my TypeScript package that was downloaded from the NPM registry. It seems to be showing as "module not found"

Set the component variable to hold the output of an asynchronous method within a service

Create a dynamic Prisma data call by using the syntax: this.prisma['dataType'].count()

Dealing with a Typescript challenge of iterating over a tuple array to extract particular values