How to unite the types of nested functions in TypeScript by creating a chain of unions

Question

How to unite the types of nested functions in TypeScript by creating a chain of unions

I am attempting to create a sequence of nested functions that can be linked together, with the final callback receiving a combination of all parent arguments. Here is an example of my current unsuccessful approach:

TS Playground Link

export type SomeHandler<T> = (args: T) => void;

type WithFooArgs = { foo: string }
const withFoo = <T,>(handler: SomeHandler<T & WithFooArgs>) => (args: T & WithFooArgs) => handler(args);

type WithBarArgs = { bar: string }
const withBar = <T,>(handler: SomeHandler<T & WithBarArgs>) => (args: T & WithBarArgs) => handler(args);

type WithZooArgs = { zoo: string }
const withZoo = <T,>(handler: SomeHandler<T & WithZooArgs>) => (args: T & WithZooArgs) => handler(args);


export default withFoo(withBar(withZoo((args) => {
    // I want args to be type `WithFooArgs & WithBarArgs & WithZooArgs`
})));

The objective is to have multiple such chains that can be combined in various ways.

typescript higher-order-functions union-types

Answer 1

Answer №1

Modifying the generics of withZoo(..) based on the surrounding expressions is not feasible. Instead, consider creating a single generic that can accommodate middleware-like callbacks and use the data from those callbacks to type a unified callback function as illustrated below:

export type SomeHandler<T> = (args: T) => void;

type WithFooArgs = { foo: string }
const withFoo = <T,>(handler: SomeHandler<T & WithFooArgs>) => (args: T & WithFooArgs) => handler(args);

type WithBarArgs = { bar: string }
const withBar = <T,>(handler: SomeHandler<T & WithBarArgs>) => (args: T & WithBarArgs) => handler(args);

type WithZooArgs = { zoo: string }
const withZoo = <T,>(handler: SomeHandler<T & WithZooArgs>) => (args: T & WithZooArgs) => handler(args);

// Function to calculate union of types
type UnionToIntersection<U> = 
  (U extends any ? (k: U)=>void : never) extends ((k: infer I)=>void) ? I : never;

function createHandler<Handler extends SomeHandler<any>>(handlers: Handler[], cb: (args: UnionToIntersection<Parameters<Parameters<Handler>[0]>[0]>) => void) {
    return (args: any) => {
        return cb(handlers.reduce((acc, cur) => cur(acc), args));
    };
}

export default createHandler([withFoo, withBar, withZoo], (args) => {
    console.log(args); // WithFooArgs & WithBarArgs & WithZooArgs
});

TypeScript Playground Link

Answer 2

Modifying the generics of withZoo(..) based on the surrounding expressions is not feasible. Instead, consider creating a single generic that can accommodate middleware-like callbacks and use the data from those callbacks to type a unified callback function as illustrated below:

export type SomeHandler<T> = (args: T) => void;

type WithFooArgs = { foo: string }
const withFoo = <T,>(handler: SomeHandler<T & WithFooArgs>) => (args: T & WithFooArgs) => handler(args);

type WithBarArgs = { bar: string }
const withBar = <T,>(handler: SomeHandler<T & WithBarArgs>) => (args: T & WithBarArgs) => handler(args);

type WithZooArgs = { zoo: string }
const withZoo = <T,>(handler: SomeHandler<T & WithZooArgs>) => (args: T & WithZooArgs) => handler(args);

// Function to calculate union of types
type UnionToIntersection<U> = 
  (U extends any ? (k: U)=>void : never) extends ((k: infer I)=>void) ? I : never;

function createHandler<Handler extends SomeHandler<any>>(handlers: Handler[], cb: (args: UnionToIntersection<Parameters<Parameters<Handler>[0]>[0]>) => void) {
    return (args: any) => {
        return cb(handlers.reduce((acc, cur) => cur(acc), args));
    };
}

export default createHandler([withFoo, withBar, withZoo], (args) => {
    console.log(args); // WithFooArgs & WithBarArgs & WithZooArgs
});

TypeScript Playground Link

How to unite the types of nested functions in TypeScript by creating a chain of unions

Answer №1

Similar questions

Extracting and retrieving the value from the paramMap in Angular/JavaScript

Discovering the element within an array using the post method in TypeScript

Issue with setInterval function execution within an Angular for loop

Retrieving Cookie from Angular 2 Response

The character 'T' cannot be converted to a string

Sending various data from dialog box in Angular 8

What is the best way to organize class usage within other classes to prevent circular dependencies?

What is the best way to prevent the hassle of manually reloading a VS Code extension each time I make updates

Challenges with Angular observables

How to Validate Ionic 2 Radio Button Selections with TypeScript

How can I efficiently extract a list of keys or numbers from an enum using TypeScript?

The specified 'IArguments' type does not qualify as an array type

Utilizing TS2722 alongside restrictive parameters in tsconfig

Angular and the Client IP Address

Error during Webpack Compilation: Module 'jQuery' not found in Travis CI with Mocha Test

Discovering the most recent 10 date elements in a JSON object within a React application

Is it possible to create my TypeORM entities in TypeScript even though my application is written in JavaScript?

typescript: issues with angular.bind and array mapping

mentioning a JSON key that includes a period

Fix the TypeScript issue encountered during a CDK upgrade process