Typescript's universal matching function for discriminated union types

Could a generic match function be defined over discriminated union type? Let's consider the following type declarations:

const Kinds = {
  A: 'A',
  B: 'B',
};
type Kind = typeof Kinds.A | typeof Kinds.B;
type Value = A | B;
interface A {
  kind: Kinds.A
}
interface B {
  kind: Kinds.B
}

While a switch statement can be used to define a match function like this:

interface Matcher<T> {
  Kinds.A: (value: A) => T
  Kinds.B: (value: B) => T
}
function match<T>(matcher: Matcher<T>) {
  return function(value: Value) {
    switch (value.kind) {
      case Kinds.A: return matcher[Kinds.A](value);
      case Kinds.B: return matcher[Kinds.B](value);
    }
  }
}

Although functional, this approach becomes cumbersome when dealing with numerous union members.

Is there a way to streamline this process, perhaps utilizing Mapped Types or other features from the latest 2.1 branch?

I experimented with "Mapped Types", but struggled to extract concrete Value based on known Kind, for example:

type Matcher<T> = {[P in Kind]: (value: P) => T};
function match<T>(matcher: Matcher<T>) {
  return function(value: Value) {
    return matcher[value.kind](value);
  }
}

The challenge lies in translating P into its corresponding Value type.

Answer №1

To successfully retrieve a member of a union based on its kind, you can utilize the following type:

type UnionMemberByKind<K> = Extract<Union, { kind: K }>

The Extract<T, U> function identifies and returns the members of T that match with U, allowing you to isolate the specific member of the union by its designated kind.

Using this type, you can effectively construct your matcher object as outlined below:

type Matcher<Res> = {
    [P in Union["kind"]]: (value: UnionMemberByKind<P>) => Res
}

Subsequently, define your match function as follows:

function match<T>(matcher: Matcher<T>) {
    return function(value: Union) {
        return matcher[value.kind](value as any);
    }
}

(The use of as any cast may not be ideal, but currently there seems to be no alternative method)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How Can I Build a Dynamic Field Form Builder in Angular 4?

While working with dynamic JSON data, I needed to create fields dynamically. For instance, if my JSON array contains 3 values, I would generate 3 input checkboxes dynamically as shown below: <ng-template ngFor let-numberOfRow [ngForOf]="numberOfRows"&g ...

Updating a global variable in Ionic 3

I recently started exploring the world of Ionic, Angular, and TypeScript. I encountered a scenario where I needed to have a variable "ar: AR" accessible across all pages. To achieve this, I decided to make it a global variable by following these steps: Fi ...

Guide to swapping out embedded objects within a TypeScript data structure

I am in need of modifying a TypeScript object by conducting a key search. It is important to note that the key may be repeated within the object, so I must ensure it belongs to the correct branch before making modifications to the corresponding object. To ...

Creating Concurrent Svelte Applications with Local State Management

Note: Self-answer provided. There are three primary methods in Svelte for passing data between components: 1. Utilizing Props This involves passing data from a parent component to a child component. Data transfer is one-way only. Data can only be passed ...

Obtain precise measurements of a modified image using the Sharp library

My Cloud Function successfully resizes images uploaded to Cloud Storage using Sharp. However, I am facing an issue with extracting metadata such as the exact height and width of the new image. I am contemplating creating a new function that utilizes diff ...

The GraphQl Code Generator fails to correctly generate the graphql() function in Next.js applications

While working on my next.js project, I integrated GraphQL to generate types for queries. However, the code generator is not functioning properly and displaying an error message: "The query argument is unknown! Please regenerate the types." within the gql.t ...

I am experiencing difficulties in assigning values to a formArray

I am struggling to update values in an array form, as I am facing challenges setting new values. Although I attempted to set values using patch value, my attempts were unsuccessful. // Component.ts this.packageForm = this.formBuilder.group({ title: [&a ...

How can I dynamically assign the formControlName to an <input> element within Angular?

I'm currently developing a component with the goal of streamlining and standardizing the appearance and functionality of our forms. The code snippet below illustrates the structure: Sample Implementation ... <my-form-input labelKey = "email" cont ...

Converting an array of objects to an array of JSON objects in TypeScript

My dilemma lies in the data I have uploaded under the _attachments variable: https://i.sstatic.net/jnFNH.png My aim is to format this data for insertion in the following structure: "_attachments": [ { "container": "string", "fileName": "string" ...

Creating a typescript type for contextual dispatch by leveraging the values of another interface

I am seeking to define a specific type for my "reducer" function. The "reducer" function I have takes in 2 parameters: the current state and the data sent in the dispatch context (to be used by the reducer). const reducer = ( state: any, props: { ...

My unique VSCode extension performs flawlessly during debugging, but encounters issues once installed

While debugging, my custom language extension for VSCode is functioning perfectly. However, once installed, the VSIX doesn't seem to include any TypeScript features. When I open the correct file extension type, it highlights everything and displays th ...

Tips on transforming Angular 2/4 Reactive Forms custom validation Promise code into Observable design?

After a delay of 1500ms, this snippet for custom validation in reactive forms adds emailIsTaken: true to the errors object of the emailAddress formControl when the user inputs [email protected]. https://i.stack.imgur.com/4oZ6w.png takenEmailAddress( ...

Leveraging an intersection type that encompasses a portion of the union

Question: I am currently facing an issue with my function prop that accepts a parameter of type TypeA | TypeB. The problem arises when I try to pass in a function that takes a parameter of type Type C & Type D, where the intersection should include al ...

Transform text into clickable URL references

I have developed a unique component in NextJS that transforms a specified string within a text into a link of my choosing. export const StringToLink = ({ href, initialText, stringToReplace, useAnchorTag = false, }: { initialText: string; string ...

How to Transfer Data to Routes in Angular 2?

I have been working on a project with Angular 2 where I am utilizing ROUTER_DIRECTIVES to move between components. There are currently two components involved, namely PagesComponent and DesignerComponent. My goal is to navigate from PagesComponent to Des ...

An element from an array of typescript items

My current challenge involves working with arrays. Here is an example of the array I am dealing with: Array[{id:0,name:"a"},{id:1,name:"b"}...] In addition to this array, I have another array called Array2. My goal is to extract items from Array where th ...

Tips for dynamically calling a property member of a function type in Typescript

How can I determine if a member is a function in TypeScript? Is dynamic typing discouraged in TypeScript? function checkIfFunction<T, K extends keyof T>(obj: T, propName: K) { if (typeof obj[propName] === "function") { obj[p ...

What is the method for retrieving the specific type within the parameters of a generic function?

Here is the code snippet: public <K, T> Map<K, T> method1(Map<K, T> map, Class<T> entityClass){ //I require the actual type instance of T here; String name = entityClass.getClass().getName(); return map; } Do you thin ...

Using async method in controller with NestJS Interceptor

I am seeking a way to capture both the result and any potential errors from an asynchronous method within a controller using an interceptor. When an error is thrown, the interceptor can respond accordingly. However, I am struggling to figure out how to tri ...

Troubleshooting the issue with the AWS CodeBuild SAM esbuild integration not functioning

I currently have a Lambda's API Gateway repository in CodeCommit that I successfully build using esbuild with CLI (SAM BUILD and then SAM DEPLOY). Now, I am looking to streamline the building process by integrating it with CodePipeline. I started exp ...