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

Question

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

Despite my expectations, this code does not pass typechecking. Is there a way to ensure it is well typed in Typescript?

const hh = {
  a: (_: { type: 'a' }) => '',
  b: (_: { type: 'b' }) => '',
} as const;

export function dispatch<
  Arg extends Parameters<(typeof hh)[keyof typeof hh]>[0],
>(arg: Arg) {
  const h = hh[arg.type];
  h(arg);
}

The purpose of the dispatch() function is to accept a valid argument for one of the functions stored in hh and invoke that function with the given argument.

typescript

Answer 1

Answer №1

The compiler is having difficulty handling the concept of "correlated union types" as discussed in ms/TS#30581. However, there is a suggested workaround provided officially in ms/TS#47109, which involves using a map type that acts as the single source of truth for functions and dispatch arguments.

Let's define this map type:

type ActionMap = {
  a: {
    payload?: {};
  };
  b: {
    payload?: {};
  };
};

Assuming that you are working with redux actions, I have incorporated an optional payload property.

Now, we can type hh utilizing this type along with mapped types:

const hh: {
  [K in keyof ActionMap]: (action: ActionMap[K] & { type: K }) => string;
} = {
  a: (action) => '',
  b: (action) => '',
};

We will also create another type for the dispatch arguments, where we return a default union along with specific arguments based on the generic argument representing the dispatched action:

type DispatchArgs<T extends keyof ActionMap = keyof ActionMap> = {
  [K in T]: { type: K } & ActionMap[K];
}[T];

Example of usage:

export function dispatch<ActionType extends keyof ActionMap>(
  arg: DispatchArgs<ActionType>,
) {
  const h = hh[arg.type];

  h(arg); // no error
}

Link to Playground

Answer 2

The compiler is having difficulty handling the concept of "correlated union types" as discussed in ms/TS#30581. However, there is a suggested workaround provided officially in ms/TS#47109, which involves using a map type that acts as the single source of truth for functions and dispatch arguments.

Let's define this map type:

type ActionMap = {
  a: {
    payload?: {};
  };
  b: {
    payload?: {};
  };
};

Assuming that you are working with redux actions, I have incorporated an optional payload property.

Now, we can type hh utilizing this type along with mapped types:

const hh: {
  [K in keyof ActionMap]: (action: ActionMap[K] & { type: K }) => string;
} = {
  a: (action) => '',
  b: (action) => '',
};

We will also create another type for the dispatch arguments, where we return a default union along with specific arguments based on the generic argument representing the dispatched action:

type DispatchArgs<T extends keyof ActionMap = keyof ActionMap> = {
  [K in T]: { type: K } & ActionMap[K];
}[T];

Example of usage:

export function dispatch<ActionType extends keyof ActionMap>(
  arg: DispatchArgs<ActionType>,
) {
  const h = hh[arg.type];

  h(arg); // no error
}

Link to Playground

Answer 3

Answer №2

TLDR: https://tsplay.dev/we8MYW

To simplify the implementation of the map, I created a function that generates a dispatch function tailored for a specific key in the map. This approach allowed us to validate the key against the set rules before proceeding.

function createDispatch(hh: {[key in string]: (_: { type: key }) => any}) {
  return dispatch(arg: { type: key }) {
    // ...
  }
}

I then created a Generic type that takes a union of keys and outputs an object where keys and values are identical.

type ExactValue<Of extends string> = {
  [K in Of]: K;
};

type TestExactValue = ExactValue<"a" | "b"> // { a: "a", b: "b" }

type HH<O> = { readonly [key in keyof O]: (_: { type: O[key]}) => any }

type TestHH = HH<TestExactValue> // { a: (_: { type: "a" }) => any, b: (_: { type: "b" }) => any }

function createDispatcher<Key extends keyof typeof hh, O extends ExactValue<Key>, WW extends { readonly [key in keyof O]: (_: { type: O[key]}) => any }>(hh: WW) {

type ExactValue<Of extends string> = {
  [K in Of]: K;
};


function createDispatcher<Key extends keyof typeof hh, O extends ExactValue<Key>, WW extends { readonly [key in keyof O]: (_: { type: O[key]}) => any }>(hh: WW) {
  return function dispatch<MyKey extends Key>(arg: { type: Key } & { type: MyKey }) {
    const h = hh[arg.type]
    return h(arg as any) as ReturnType<typeof h>
  }
}

Answer 4

TLDR: https://tsplay.dev/we8MYW

To simplify the implementation of the map, I created a function that generates a dispatch function tailored for a specific key in the map. This approach allowed us to validate the key against the set rules before proceeding.

function createDispatch(hh: {[key in string]: (_: { type: key }) => any}) {
  return dispatch(arg: { type: key }) {
    // ...
  }
}

I then created a Generic type that takes a union of keys and outputs an object where keys and values are identical.

type ExactValue<Of extends string> = {
  [K in Of]: K;
};

type TestExactValue = ExactValue<"a" | "b"> // { a: "a", b: "b" }

type HH<O> = { readonly [key in keyof O]: (_: { type: O[key]}) => any }

type TestHH = HH<TestExactValue> // { a: (_: { type: "a" }) => any, b: (_: { type: "b" }) => any }

function createDispatcher<Key extends keyof typeof hh, O extends ExactValue<Key>, WW extends { readonly [key in keyof O]: (_: { type: O[key]}) => any }>(hh: WW) {

type ExactValue<Of extends string> = {
  [K in Of]: K;
};


function createDispatcher<Key extends keyof typeof hh, O extends ExactValue<Key>, WW extends { readonly [key in keyof O]: (_: { type: O[key]}) => any }>(hh: WW) {
  return function dispatch<MyKey extends Key>(arg: { type: Key } & { type: MyKey }) {
    const h = hh[arg.type]
    return h(arg as any) as ReturnType<typeof h>
  }
}

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

Answer №1

Answer №2

Similar questions

How to arrange data in angular/typescript in either ascending or descending order based on object key

The 'current' in react typescript is not found within the type 'never'

The functionality of TypeScript's .entries() method is not available for the type 'DOMTokenList'

Encountering 'null' error in template with Angular 4.1.0 and strictNullChecks mode

The data type 'T[K]' does not meet the required conditions of 'string | number | symbol'

The TypeScript error message indicates that the property 'forEach' is not found on the 'FileList' type

Error: Unable to initialize i18next as a function

Is there a way to append a unique property with varying values to an array of objects in TypeScript?

Comparing dates in Angular 6 can be done by using a simple

Tips for parsing through extensive JSON documents containing diverse data types

Required Ionic form field alert

Converting an Array of Objects into a single Object in React: A Tutorial

Looking for a button that can be toggled on and off depending on the input fields

What is the best way to display data retrieved through an HTTP service using ngFor?

Determine to which observable in the list the error corresponds

Encountering the "Argument of type 'string' is not assignable to parameter of type 'never'" error when using Array.prototype.includes

Utilize Lodash to iterate through functions in a loop and retrieve the first matching result

What could be the reason behind tsx excluding attribute names with "-" in them from being checked?

How can I showcase array elements using checkboxes in an Ionic framework?

The problem with the Custom Select Component: Error Arises When Utilizing the Generic Type <T,> with a Comma as Opposed to <T> Without a Comma