Comparing Necessary and Deduced Generic Types in TypeScript

Question

Comparing Necessary and Deduced Generic Types in TypeScript

Can you explain the difference between these two generic types?

type FnWithRequiredParam<T> = (t: T) => void
type FnWithParamInferred = <T>(t: T) => void

From what I understand, FnWithRequiredParam will always require the generic type to be explicitly defined. For example, using

FnWithRequiredParam<string>

will essentially turn it into (t: string) => void.

However, I'm unclear on the meaning of FnWithParamInferred. In some situations, <T> is inferred based on its usage (such as with Array.map), but the following code snippet produces an error:

var f: FnWithParamInferred = (a: number) => { console.log(a) }

This error states that number and T are incompatible. So, what exactly is T in this context? It hasn't been explicitly declared and is being compared to another type. How do function types like <T>(...) => ... determine the generic T?

It seems that when <T> is a required generic of a class/interface, such as with Array<T>, then methods of the array can successfully infer T. However, outside of a class/interface, type inference doesn't appear to work the same way.

typescript generics type-systems

Answer 1

Answer №1

These two have distinct differences in the function signature they establish.

The first one sets a regular function signature that can be customized with a type parameter when utilized, and that specific type remains fixed within the signature.
On the other hand, the second defines a generic function signature, allowing it to accept a parameter of any type T, with T either inferred or explicitly specified at the time of calling the function.

Take into account the following declarations:

declare const fn: FnWithRequiredParam<number> 
declare const genericFn: FnWithParamInferred;

// T is predetermined upon declaration
fn(1) // valid
fn("1") // error 

// Caller determines T
genericFn(1) // valid, with T being number for this call
genericFn("1") // valid, with T being string for this call
genericFn<number>("1") // error as T was set as number but a string was passed

The issue leading to the error you are encountering arises from trying to assign a function with a number parameter to a function meant to accommodate a parameter of any type T, where T should be decided by the caller. Only a generic function fulfills the type FnWithParamInferred

var f: FnWithParamInferred = <T>(a: T) => { console.log(a) }

Perhaps what you desire is the ability to skip specifying the explicit type argument in the variable declaration and have it automatically deduced based on the value assigned. Unfortunately, Typescript does not support such functionality. If a type annotation for a variable is defined, no inference will take place.

To allow the compiler to infer the function type, omit the type annotation entirely:

var f = (a: number) => { console.log(a) } // inferred as (a: number) => void

Alternatively, you can create a generic helper function to infer T, while restricting the function signature according to FnWithRequiredParam

function createFunction<T>(fn: FnWithRequiredParam<T>) {
    return fn;
}

var f = createFunction((a: number) => { console.log(a) }) // inferred as FnWithRequiredParam<number>

Answer 2

These two have distinct differences in the function signature they establish.

The first one sets a regular function signature that can be customized with a type parameter when utilized, and that specific type remains fixed within the signature.
On the other hand, the second defines a generic function signature, allowing it to accept a parameter of any type T, with T either inferred or explicitly specified at the time of calling the function.

Take into account the following declarations:

declare const fn: FnWithRequiredParam<number> 
declare const genericFn: FnWithParamInferred;

// T is predetermined upon declaration
fn(1) // valid
fn("1") // error 

// Caller determines T
genericFn(1) // valid, with T being number for this call
genericFn("1") // valid, with T being string for this call
genericFn<number>("1") // error as T was set as number but a string was passed

The issue leading to the error you are encountering arises from trying to assign a function with a number parameter to a function meant to accommodate a parameter of any type T, where T should be decided by the caller. Only a generic function fulfills the type FnWithParamInferred

var f: FnWithParamInferred = <T>(a: T) => { console.log(a) }

Perhaps what you desire is the ability to skip specifying the explicit type argument in the variable declaration and have it automatically deduced based on the value assigned. Unfortunately, Typescript does not support such functionality. If a type annotation for a variable is defined, no inference will take place.

To allow the compiler to infer the function type, omit the type annotation entirely:

var f = (a: number) => { console.log(a) } // inferred as (a: number) => void

Alternatively, you can create a generic helper function to infer T, while restricting the function signature according to FnWithRequiredParam

function createFunction<T>(fn: FnWithRequiredParam<T>) {
    return fn;
}

var f = createFunction((a: number) => { console.log(a) }) // inferred as FnWithRequiredParam<number>

Comparing Necessary and Deduced Generic Types in TypeScript

Answer №1

Similar questions

Creating a DynamoDB table and adding an item using CDK in Typescript

Steps for preventing text manipulation in ng2-ace-editorWould you like to restrict users from copying, pasting

typescript error: Unable to access properties of an undefined value

Mapped types: Specify mandatory properties depending on whether an array of identical objects includes a specific string value

Is Typescript familiar with the import -> require syntax, but unfamiliar with the require -> import syntax?

Adaptable Style Properties Adjusted by Component Size

Leveraging React and TypeScript's capabilities to pass around arguments efficiently

What is the best way to set a checkbox to null instead of false using Angular?

The static method in TypeScript is unable to locate the name "interface"

Is it possible to extract a single element from an array that is stored as a standard Observable?

The function cannot be called on a type that does not have a callable signature. The specified type, 'number | Dispatch<SetStateAction<number>>', does not have any compatible call signatures

Conceal the React button once it has been pressed

Exploring table iteration in Angular 7

Steer clear of utilizing the "any" type in your Express.js application built with

Unfortunately, the utilization of an import statement outside a module is restricted when working with Electron

Retrieve data upon component mounting and deactivate the query in React-query

How can I encode and decode a base64 string using AngularJS1 and TypeScript?

The interface 'HTMLIonIconElement' is not able to extend both 'IonIcon' and 'HTMLStencilElement' types at the same time

Implementing recursive functionality in a React component responsible for rendering a dynamic form

Trigger Angular2 EventEmitter in child component to inform parent component