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

The property 'filter' is not recognized on the 'Object' type. An attempt to filter the response was made

Constructor polymorphism in TypeScript allows for the creation of multiple constructor signatures

The try-catch statement in Typescript is generating an inconsistent return error

TypeScript test framework for testing API calls in VS Code extensions

typescript function intersection types

Issue encountered while deploying Next.js application on vercel using the replaceAll function

The pivotal Angular universal service

How to access the audio element in Angular using ViewChild: Can it be treated as an

Always deemed non-assignable but still recognized as a universal type?

The combination of TypeScript decorators and Reflect metadata is a powerful tool for

Tips for utilizing mergeWith with Subjects in an Angular application

Guide on integrating react-tether with react-dom createPortal for custom styling of tethered components based on their target components

Set up your Typescript project to transpile code from ES6 to ES5 by utilizing Bable

Typescript struggles to identify properties that have no business being there

Unable to run `create-react-app` with the `--template typescript` option

Using command line arguments in a Tauri project with a Next.js frontend

The array containing numbers or undefined values cannot be assigned to an array containing only numbers

RXJS expand keeps on recursing indefinitely

Update the style dynamically in Angular using an ngFor directive and an array of data

RxJS emits an array of strings with a one second interval between each emission