TypeScript Generic Functions and Type Literals

Question

TypeScript Generic Functions and Type Literals

Everything seems to be running smoothly:

type fun = (uid: string) => string 

const abc: fun = value => value

const efg = (callback:fun, value:string) =>callback(value)

console.log(efg(abc, "123"))

However, when we try to make it generic, we encounter an error:

type fun = (uid: string) => string 

const abc: fun = value => value

const efg = <T>(callback:T, value:string) =>callback(value)

console.log(efg(abc, "123"))

Error:

This expression is not callable. Type 'unknown' has no call signatures.(2349)

TypeScript Playground demo

I checked out https://www.typescriptlang.org/docs/handbook/generics.html but found nothing about Generic Function Type Literals.

I need the ability to pass different functions as arguments, which is why I am exploring this approach.

Is there a workaround or hack for this issue, or is there a proper solution available?

javascript typescript function generics literals

Answer 1

Answer №1

The issue lies in the lack of constraints on the T type, allowing it to be any data type such as a number, string, etc. This unrestricted nature leads to errors when trying to treat number as a function.

To rectify this, it is essential to specify constraints for T within your code, making it appear as a function with a string argument. One approach could be:

const efg = <T extends (a: string) => any>(callback: T, value: string) => callback(value)

In the above example, T is constrained by the extend keyword to ensure it functions that take a string and return anytype of value - allowing for functions like

string->number, string-> boolean, string->object

to work correctly.

If necessary, further constraints can be applied. For instance, if the function should strictly be string->string, you can extend the fun interface like so:

const efg = <T extends fun>(callback: T, value: string) => callback(value)

Playground

Answer 2

The issue lies in the lack of constraints on the T type, allowing it to be any data type such as a number, string, etc. This unrestricted nature leads to errors when trying to treat number as a function.

To rectify this, it is essential to specify constraints for T within your code, making it appear as a function with a string argument. One approach could be:

const efg = <T extends (a: string) => any>(callback: T, value: string) => callback(value)

In the above example, T is constrained by the extend keyword to ensure it functions that take a string and return anytype of value - allowing for functions like

string->number, string-> boolean, string->object

to work correctly.

If necessary, further constraints can be applied. For instance, if the function should strictly be string->string, you can extend the fun interface like so:

const efg = <T extends fun>(callback: T, value: string) => callback(value)

Playground

Answer 3

Answer №2

If you're looking for a solution, the code snippet below based on rxjs's UnaryFunction might be helpful to you.

Check out this TypeScript Playground demo for more details:

interface Callable<T> {
    (source: T): T;
}

interface CallableInvoker<T> {
    // If the return type also needs to be T, replace any with T
    (callback: Callable<T>, value: T): any
}


function doubleNumber(value: number): number {
    return value * 2;
}

function doubleString(value: string): string {
    return value + value;
}

const efg: Callable<number> = doubleNumber; // Valid
const efg2: Callable<number> = doubleString; // Invalid, doubleString must match the generic type

const efg3: CallableInvoker<number> = (doubleNumber, value) => doubleNumber(5);

Answer 4

If you're looking for a solution, the code snippet below based on rxjs's UnaryFunction might be helpful to you.

Check out this TypeScript Playground demo for more details:

interface Callable<T> {
    (source: T): T;
}

interface CallableInvoker<T> {
    // If the return type also needs to be T, replace any with T
    (callback: Callable<T>, value: T): any
}


function doubleNumber(value: number): number {
    return value * 2;
}

function doubleString(value: string): string {
    return value + value;
}

const efg: Callable<number> = doubleNumber; // Valid
const efg2: Callable<number> = doubleString; // Invalid, doubleString must match the generic type

const efg3: CallableInvoker<number> = (doubleNumber, value) => doubleNumber(5);

TypeScript Generic Functions and Type Literals

Answer №1

Answer №2

Similar questions

Configuring JSON in PHP and JavaScript

Execute local server's unit tests using a Gulp task

Launching npm start does not automatically open a browser tab

How can two unique links toggle the visibility of divs with two specific IDs?

Utilize jQuery and PHP to populate an HTML Select Field with data retrieved from a MySQL Database in JSON format

Javascript Developer Platform glitches

When using child_process to run a Python script in Node.js, a promise may not resolve properly if the process exits before all

The concept of recursive generics in combination with array inference

Ensuring that two operators are not consecutively placed in a Javascript calculator-validation guide

Display a bootstrap toast using a JavaScript class method

Node.js retrieves a single row from a JSON array with two dimensions

How can I use AJAX to read an image file and display it on a Canvas?

Is there a way to see the default reactions in a browser when keyboard events such as 'tab' keydown occur?

Seamlessly Loading Comments onto the Page without Any Need for Refresh

Is the on-error event not functioning properly in the <img> tag?

Updating React state from another component - using useState

Creating a webpage with a feature that allows users to click a button and instantly change the background to a

Guide to obtaining scope within a nested directive

Dealing with AngularJS: Issue arises when attempting to inject $modal into a controller nested within a directive

Removing the year data and converting the month in JavaScript