Tips for reducing a discriminated union by using the key value of a Record

Question

Tips for reducing a discriminated union by using the key value of a Record

I am working with a union type that has a discriminator property called "type". I then define a Record<> where the keys are the "type" property values.

How can I specify the second generic parameter of the Record (Record< , this param>) so that the values in the map/record are inferred based on the corresponding key?

TypeScript Playground

interface Dog {
  type: 'dog';
  breed: string;
}

interface Vehicle {
  type: 'vehicle';
  max_speed: number;
};

type Thing = Dog | Vehicle;

const printMap: Record<Thing['type'], (thing: Thing) => string> = {
  'dog': x => `Dog ${x.breed}`,
                    // ^^^^^ Property 'breed' does not exist on type 'Thing'. Property 'breed' does not exist on type 'Vehicle'.
                    // How do I make TypeScript infer `x` is a Dog because the key/property name is 'dog'?
  'vehicle': x => `Vehicle max speed ${x.max_speed}`
                                      // ^^^^^^^^^ Property 'max_speed' does not exist on type 'Thing'. Property 'max_speed' does not exist on type 'Dog'.
                                      // How do I make TypeScript infer `x` is a Vehicle because the key/property name is 'vehicle'?
}

typescript

Answer 1

Answer №1

To address this issue, you cannot utilize a Record<K, V> since it requires the same type for all property values. For distinct types for each property value, you need to create a mapped type that selects the appropriate member from the discriminated union for each property. Here is a possible solution:

type DiscriminatedUnionHandler<T extends Record<K, PropertyKey>, K extends keyof T, R> =
  { [P in T[K]]: (foo: Extract<T, Record<K, P>>) => R }

The

DiscriminatedUnionHandler<T, K, R>

function accepts a discriminated union type T, its discriminant key name K, and the return type R for individual handler functions. The resulting type includes properties for each value of T[K] (in this case,

"dog" | "vehicle"

for Thing), where each property represents a function that takes the relevant member of T</code and returns <code>R.

For the Thing scenario, the implementation would be as follows:

type DiscriminatedUnionHandler<T extends Record<K, PropertyKey>, K extends keyof T, R> =
  { [P in T[K]]: (foo: Extract<T, Record<K, P>>) => R }

interface Dog {
  type: 'dog';
  breed: string;
}
interface Vehicle {
  type: 'vehicle';
  max_speed: number;
};

type Thing = Dog | Vehicle;

const printMap: DiscriminatedUnionHandler<Thing, "type", string> = {
  'dog': x => `Dog ${x.breed}`,
  'vehicle': x => `Vehicle max spped ${x.max_speed}`
}

Link to Playground for code testing

Answer 2

To address this issue, you cannot utilize a Record<K, V> since it requires the same type for all property values. For distinct types for each property value, you need to create a mapped type that selects the appropriate member from the discriminated union for each property. Here is a possible solution:

type DiscriminatedUnionHandler<T extends Record<K, PropertyKey>, K extends keyof T, R> =
  { [P in T[K]]: (foo: Extract<T, Record<K, P>>) => R }

The

DiscriminatedUnionHandler<T, K, R>

function accepts a discriminated union type T, its discriminant key name K, and the return type R for individual handler functions. The resulting type includes properties for each value of T[K] (in this case,

"dog" | "vehicle"

for Thing), where each property represents a function that takes the relevant member of T</code and returns <code>R.

For the Thing scenario, the implementation would be as follows:

type DiscriminatedUnionHandler<T extends Record<K, PropertyKey>, K extends keyof T, R> =
  { [P in T[K]]: (foo: Extract<T, Record<K, P>>) => R }

interface Dog {
  type: 'dog';
  breed: string;
}
interface Vehicle {
  type: 'vehicle';
  max_speed: number;
};

type Thing = Dog | Vehicle;

const printMap: DiscriminatedUnionHandler<Thing, "type", string> = {
  'dog': x => `Dog ${x.breed}`,
  'vehicle': x => `Vehicle max spped ${x.max_speed}`
}

Link to Playground for code testing

Tips for reducing a discriminated union by using the key value of a Record

Answer №1

Similar questions

Effectively managing intricate and nested JSON objects within Angular's API service

Having trouble deleting JavaScript object properties within a loop?

Exploring nested JSON objects within an array using ngFor directive

After selecting an item, the Next UI navbar menu seems to have trouble closing

Utilizing the useSelect hook in Typescript to create custom types for WordPress Gutenberg, specifically targeting the core/editor

does not have any exported directive named 'MD_XXX_DIRECTIVES'

Trouble with invoking a function within a function in Ionic2/Angular2

The JavaScript code is executing before the SPFX Web Part has finished loading on the SharePoint page

Ways to determine the current active tab in React are:

Issue: The key length and initialization vector length are incorrect when using the AES-256-CBC encryption algorithm

Issue encountered: "TypeError: .... is not a function" arises while attempting to utilize a component function within the template

Error: The function cannot be executed on an immutable object in React Native Jest unit testing with Typescript

Is it possible to declare language features in Typescript? For example, changing `!variable` to `no variable`

Verification based on conditions for Angular reactive forms

The identifier "id" is not a valid index for this type

Troubleshooting issues with TypeScript D3 v4 module import functionality

Designing a web application with Angular2

What is the best way to implement a dispatch function in TypeScript?

The TypeScript optional callback parameter is not compatible with the anonymous function being passed to it

Enhance the MUI palette by incorporating TypeScript, allowing for seamless indexing through the palette