Utilize TypeScript Generics to define an object with a different type specified for its key and value

Question

Utilize TypeScript Generics to define an object with a different type specified for its key and value

I'm encountering some challenges when working with Generics in TypeScript.

My goal is to create an object based on another object type using Generics. I initially referenced this TypeScript documentation

This is the code snippet I have come up with so far:

type ClickableItem<T extends Record<string, any>, K extends keyof T> = {
  label: string;
  key: K;
  render?: (value: T[K]) => string;
   // The value (argument) type here should reflect the type from the selected key
};

The current issue

When attempting to use the ClickableItem type in an object, the argument type of render becomes a union of all possible type values. For example:


type Example = {
  a: string,
  b: number
}

const item = {
  label: 'x',
  key: 'a',
  render: (value) => value //ERROR HERE
} satisfies ClickableItem<Example, keyof Example>

The render method is being inferred incorrectly as type string | number, even though the key a is explicitly set to type string

In the previous example, the type of the render method should be (value: string)=> string instead of the inferred type

(value: number | string)=> string

.

Here's the TypeScript Playground link which showcases both the original example from TypeScript's documentation and my aforementioned test implementation

typescript generics types typescript-generics

Answer 1

Answer №1

{
  label: 'x',
  key: 'a', 
  render: (value) => value
}

Does not fall under the category of

ClickableItem<Example, keyof Example>

, therefore it will not fulfill the requirement here.

ClickableItem<Example, keyof Example>

translates to this type:

type MyType = {
  label: string;
  key: 'a' | 'b'
  render?: (value: string | number) => string;
};

In simpler terms, your code is equivalent to:

const itemFromSatisfies = {
  label: 'x',
  key: 'a',
  render: (value) => value //ERROR HERE
} satisfies {
  label: string;
  key: 'a' | 'b'
  render?: (value: string | number) => string;
}

It's evident that there is no link between the key and the render function. This connection got lost because you provided keyof Example as K, resulting in one object type that would fit for all keys of T.

However, your object can't handle all keys of T. It can only manage the ones that are of type string since render should return a string, and you're just returning the raw value which must be a string.

Instead, what you need is a union that encompasses one member for each property.

type ClickableItemUnion<T extends Record<string, any>> = {
  [K in keyof T]: ClickableItem<T, K>
}[keyof T]


type MyTest = ClickableItemUnion<Example>
// ClickableItem<Example, 'a'> | ClickableItem<Example, 'b'>

This mapped type forms a union for every property of T where the key and render properties can be paired up accurately, one at a time.

Now, if you do this, it will work:

const itemFromUnion = {
  label: 'x',
  key: 'a', 
  render: (value) => value
} satisfies ClickableItemUnion<Example>

This works because this object aligns with the one member of the union where the key is 'a' and the render function accepts a string.

Therefore, based on all of that, we can simplify things back down by utilizing a mapped type that produces a union right from the start:

type ClickableItem<
  T extends Record<string, any>,
  K extends keyof T
> = {
  [P in K]: {
    label: string;
    key: P;
    render?: (value: T[P]) => string;
  }
}[K];

This type maps whatever union of keys is requested, yielding a union for each one.

Hence now:

type MyType = ClickableItem<Example, keyof Example>

is equivalent to:

type MyType = {
    label: string;
    key: "a";
    render?: ((value: string) => string) | undefined;
} | {
    label: string;
    key: "b";
    render?: ((value: number) => string) | undefined;
}

And thus, it can be used in your satisfies constraint without any issues:

const item = { // fine
  label: 'x',
  key: 'a', 
  render: (value) => value
} satisfies ClickableItem<Example, keyof Example>

Visit playground

Answer 2

{
  label: 'x',
  key: 'a', 
  render: (value) => value
}

Does not fall under the category of

ClickableItem<Example, keyof Example>

, therefore it will not fulfill the requirement here.

ClickableItem<Example, keyof Example>

translates to this type:

type MyType = {
  label: string;
  key: 'a' | 'b'
  render?: (value: string | number) => string;
};

In simpler terms, your code is equivalent to:

const itemFromSatisfies = {
  label: 'x',
  key: 'a',
  render: (value) => value //ERROR HERE
} satisfies {
  label: string;
  key: 'a' | 'b'
  render?: (value: string | number) => string;
}

It's evident that there is no link between the key and the render function. This connection got lost because you provided keyof Example as K, resulting in one object type that would fit for all keys of T.

However, your object can't handle all keys of T. It can only manage the ones that are of type string since render should return a string, and you're just returning the raw value which must be a string.

Instead, what you need is a union that encompasses one member for each property.

type ClickableItemUnion<T extends Record<string, any>> = {
  [K in keyof T]: ClickableItem<T, K>
}[keyof T]


type MyTest = ClickableItemUnion<Example>
// ClickableItem<Example, 'a'> | ClickableItem<Example, 'b'>

This mapped type forms a union for every property of T where the key and render properties can be paired up accurately, one at a time.

Now, if you do this, it will work:

const itemFromUnion = {
  label: 'x',
  key: 'a', 
  render: (value) => value
} satisfies ClickableItemUnion<Example>

This works because this object aligns with the one member of the union where the key is 'a' and the render function accepts a string.

Therefore, based on all of that, we can simplify things back down by utilizing a mapped type that produces a union right from the start:

type ClickableItem<
  T extends Record<string, any>,
  K extends keyof T
> = {
  [P in K]: {
    label: string;
    key: P;
    render?: (value: T[P]) => string;
  }
}[K];

This type maps whatever union of keys is requested, yielding a union for each one.

Hence now:

type MyType = ClickableItem<Example, keyof Example>

is equivalent to:

type MyType = {
    label: string;
    key: "a";
    render?: ((value: string) => string) | undefined;
} | {
    label: string;
    key: "b";
    render?: ((value: number) => string) | undefined;
}

And thus, it can be used in your satisfies constraint without any issues:

const item = { // fine
  label: 'x',
  key: 'a', 
  render: (value) => value
} satisfies ClickableItem<Example, keyof Example>

Visit playground

Utilize TypeScript Generics to define an object with a different type specified for its key and value

The current issue

Answer №1

Similar questions

Can you define the type of binding value in AngularJS 1.5(6) using TypeScript?

Concealing a VueJs component on specific pages

Unable to find solutions for all parameters needed by a CustomComponent within Angular

Having trouble resolving parameters? Facing an Angular dependency injection problem while exporting shared services?

Tips for effectively utilizing Mongoose models within Next.js

Why am I receiving an undefined value?

Encountering an error while receiving a response for the Update API request

Guide to configuring a not null property in Typescript Sequelize:

Testing Angular Components: Ensuring Proper Unit Testing of Public Members Intended for HTML Input Only

Converting the source to your image assets in Angular: A step-by-step guide

Utilizing TypeScript union types in React: A step-by-step guide

Accessing information independent of Observable data in TypeScript

Mock a single method within an Angular service

Determining type properties dynamically depending on the value of another property

What is the best approach to validating GraphQL query variables while utilizing Mock Service Worker?

Refining Angular service coding techniques

"NODEJS: Exploring the Concept of Key-Value Pairs in Object

How can I use a string variable in Angular 2 to create a dynamic template URL

What is the correct approach to managing Sequelize validation errors effectively?

Displaying the size of a group in a tooltip with Highcharts Angular