Utilizing TypeScript's type inference within a higher order function to determine the input of the returned function

Question

Utilizing TypeScript's type inference within a higher order function to determine the input of the returned function

I have been working on creating a versatile "pipe" function that takes a series of map functions to transform an input and then output the result of the final map function. Initially, I only implemented a basic version that accepts one map function as a parameter:

const pipe = <T, U>(map: (input: T) => U) => (initial: T): U => map(initial);

However, when I tested it with an identity function, it returned unknown:

// test is unknown
const test = pipe(i => i)(1);

In this scenario, ideally, test should be of type number.

My theory is that pipe(i => i) is interpreted as pipe(unknown => unknown), and no inference is made from the returned function. By calling pipe(unknown => unknown)(1), it's acceptable to pass a number into a function that expects unknown. However, since the function also returns unknown, that becomes the final result.

I am curious if my hypothesis is accurate and whether there are any discussions about it within the TypeScript development community.

Is there currently a solution in TypeScript that can achieve what I'm aiming for?

typescript typescript-generics higher-order-functions

Answer 1

Answer №1

Your identity function attempts to determine the type based on the caller, while your pipe function tries to deduce the type from the callback, resulting in an unknown type.

To resolve this issue, you need to specify the type either in the pipe function or in the i=>i parameter, or make i=>i generic.

const pipe = <T, U>(map: (input: T) => U) => (initial: T): U => map(initial);

const test0 = pipe(<T, >(i: T) => i)(0) // 0
const test1 = pipe<number, number>(i => i)(0) // number
const test2 = pipe((i: number) => i)(0) // number

Answer 2

Your identity function attempts to determine the type based on the caller, while your pipe function tries to deduce the type from the callback, resulting in an unknown type.

To resolve this issue, you need to specify the type either in the pipe function or in the i=>i parameter, or make i=>i generic.

const pipe = <T, U>(map: (input: T) => U) => (initial: T): U => map(initial);

const test0 = pipe(<T, >(i: T) => i)(0) // 0
const test1 = pipe<number, number>(i => i)(0) // number
const test2 = pipe((i: number) => i)(0) // number

Answer 3

Answer №2

The main concern arises from the fact that the function (i) => i - the specific data type for the input (i) remains unknown.

A possible solution would involve clearly defining the input data type:

Explore Typescript playground: link description

const test = pipe((i: number) => i)(1);

To enable a sequence of pipes where the output of one serves as the input for the next, a pipeline structure must be established. This can be achieved as follows:

type PipeFunction<Input, Output> = (input: Input) => Output;

class PipeBuilder<FirstInput,LastInput,LastOutput> {
    constructor(private pipes: Array<(input: any) => any>) {}

    public static of<Input, Output>(fn: PipeFunction<Input, Output>): PipeBuilder<Input, Input, Output> {
        return new PipeBuilder([fn]);
    }

    public pipe<Output>(fn: PipeFunction<LastOutput, Output>): PipeBuilder<FirstInput, LastOutput, Output> {
        return new PipeBuilder([ ...this.pipes, fn ]);
    }

    public build(): PipeFunction<FirstInput, LastOutput> {
        return (firstInput: FirstInput): LastOutput => {
            let result = this.pipes[0](firstInput);
            for(let i = 1; i <= this.pipes.length; i++) {
                result = this.pipes[i](result);
            }
            return result as any as LastOutput;
        } 
    }
}

Subsequently, these pipes can be utilized and linked together in the following manner:

Demonstration with complete builder setup here

const pipeBuilder = PipeBuilder
    .of((num: number) => num.toString())
    .pipe((str) => parseInt(str))
    .pipe(num => new Date(2022,1,1, num))
    .pipe(date => "The date is: " +  date.toISOString());


const materializedFunction = pipeBuilder.build();
const result = materializedFunction(5);
console.log(result);

Answer 4

The main concern arises from the fact that the function (i) => i - the specific data type for the input (i) remains unknown.

A possible solution would involve clearly defining the input data type:

Explore Typescript playground: link description

const test = pipe((i: number) => i)(1);

To enable a sequence of pipes where the output of one serves as the input for the next, a pipeline structure must be established. This can be achieved as follows:

type PipeFunction<Input, Output> = (input: Input) => Output;

class PipeBuilder<FirstInput,LastInput,LastOutput> {
    constructor(private pipes: Array<(input: any) => any>) {}

    public static of<Input, Output>(fn: PipeFunction<Input, Output>): PipeBuilder<Input, Input, Output> {
        return new PipeBuilder([fn]);
    }

    public pipe<Output>(fn: PipeFunction<LastOutput, Output>): PipeBuilder<FirstInput, LastOutput, Output> {
        return new PipeBuilder([ ...this.pipes, fn ]);
    }

    public build(): PipeFunction<FirstInput, LastOutput> {
        return (firstInput: FirstInput): LastOutput => {
            let result = this.pipes[0](firstInput);
            for(let i = 1; i <= this.pipes.length; i++) {
                result = this.pipes[i](result);
            }
            return result as any as LastOutput;
        } 
    }
}

Subsequently, these pipes can be utilized and linked together in the following manner:

Demonstration with complete builder setup here

const pipeBuilder = PipeBuilder
    .of((num: number) => num.toString())
    .pipe((str) => parseInt(str))
    .pipe(num => new Date(2022,1,1, num))
    .pipe(date => "The date is: " +  date.toISOString());


const materializedFunction = pipeBuilder.build();
const result = materializedFunction(5);
console.log(result);

Utilizing TypeScript's type inference within a higher order function to determine the input of the returned function

Answer №1

Answer №2

Similar questions

Attempting to utilize Pinia without a corresponding component will result in an error indicating that there are no

Issue with Angular2: The [routerLinkActive] directive does not update when using _router.navigate

How can a TypeScript Type be handed over as a prop to a React component?

What is the TypeScript alternative for `const x = require("somemod")();`?

Angular is having trouble with disabled dates on the HTML5 Datepicker

The Mat table is not updating on its own

Property of a general object

Unable to open modal externally without encountering an error in MaterializeCSS

Customize Material-UI Icons styles in React app

Discover the process of uploading a file using a post request in Protractor with TypeScript

Substitute this.bindMethod for function component

What is the best way to convert Angular form data into a POST request that the server can process?

Ways to conceal a div when the array length is zero

obtain a list of elements using ViewChild attribute

What could be causing the malfunction when using TypeScript's generic T with any?

Is it possible for an Interface's property to be a type that contains an array?

Can you explain the process of type casting an object in TypeScript?

Unexpected behavior with Angular 10 behavior subject - encountering null value after invoking .next(value) function

Trouble Loading TypeScript Class in Cast Situation

Is it possible to enable full screen window functionality in Angular 2 by simply clicking a button? Let's find out