When conditionals are used to infer function parameters in TypeScript, they may end up with the type 'never'

Question

When conditionals are used to infer function parameters in TypeScript, they may end up with the type 'never'

Problem with Typescript Parameter Type Resolution:

functionBuilder takes a parameter arg and returns an object with a function property based on the value of arg. If arg === 'a', the function expects a string parameter, otherwise it expects a number.

const functionBuilder = (arg: string) => {
  if(arg === 'a'){
    return {
      f: (val: string) => {}
    }
  }
  return {
    f: (val: number) => {}
  }
}

const f1 = functionBuilder('a');

The issue is that calling the function f on f1 requires an argument of type never instead of string

https://i.sstatic.net/UcGf7.png

javascript typescript types control-flow

Answer 1

Answer №1

Upon examination, it was noticed that the functionBuilder type was identified as

const functionBuilder: (arg: string) => {
    f: (val: string) => void;
} | {
    f: (val: number) => void;
}

This aligns with the expected type. Is this not the specific type you are seeking? Should there be a special consideration for "a"?

Regardless, take into account the following scenario (where the type of f1.f is equivalent to Type3):

type Type1 = ( (val:string) => void ) ;
type Type2 = ( (val:number) => void ) ;
type Type3 = Type1 | Type2 ;
let TestVar: Type3;
TestVar(3); //Error: Argument of type 'number' is not assignable to parameter of type 'never'.

Initially, it may appear peculiar, but isn't this precisely what "|" is intended to do? "|" signifies that TestVar can be either Type1 or Type2. Only operations that fulfill the requirements of both Type1 and Type2 are considered safe. The number 3 does not meet the criteria of Type1, while the string '3' does not meet the requirements of Type2. In essence, no argument can satisfy both Type1 and Type2 simultaneously. Hence, it results in "never".

Answer 2

Upon examination, it was noticed that the functionBuilder type was identified as

const functionBuilder: (arg: string) => {
    f: (val: string) => void;
} | {
    f: (val: number) => void;
}

This aligns with the expected type. Is this not the specific type you are seeking? Should there be a special consideration for "a"?

Regardless, take into account the following scenario (where the type of f1.f is equivalent to Type3):

type Type1 = ( (val:string) => void ) ;
type Type2 = ( (val:number) => void ) ;
type Type3 = Type1 | Type2 ;
let TestVar: Type3;
TestVar(3); //Error: Argument of type 'number' is not assignable to parameter of type 'never'.

Initially, it may appear peculiar, but isn't this precisely what "|" is intended to do? "|" signifies that TestVar can be either Type1 or Type2. Only operations that fulfill the requirements of both Type1 and Type2 are considered safe. The number 3 does not meet the criteria of Type1, while the string '3' does not meet the requirements of Type2. In essence, no argument can satisfy both Type1 and Type2 simultaneously. Hence, it results in "never".

Answer 3

Answer №2

@abcxyz is absolutely correct: there is no way to safely pass a value into

((val: string) => void) | ((val: number) => void)

without knowing which specific function it is. One solution is to cast the result of the functionBuilder call to the function type you expect:

const f1 = functionBuilder('a') as { f(val: string): void };
f1.f('…');

(creating a generic helper type can be useful for this scenario, as shown here)

Answer 4

@abcxyz is absolutely correct: there is no way to safely pass a value into

((val: string) => void) | ((val: number) => void)

without knowing which specific function it is. One solution is to cast the result of the functionBuilder call to the function type you expect:

const f1 = functionBuilder('a') as { f(val: string): void };
f1.f('…');

(creating a generic helper type can be useful for this scenario, as shown here)

Answer 5

Answer №3

After running some tests, I found that the code compiles successfully once you specify the return type as any.

 const functionBuilder = (arg: string) : any => {
  if(arg === 'a'){
    return {
      f: (val: string) => { console.log(val)}
    }
  }
  return {
    f: (val: number) => {}
  }
}

This is how the code will be executed:

const f1 = functionBuilder('a');
 
f1.f("a");

If you run this code, the console will output the value 'a'.

Answer 6

After running some tests, I found that the code compiles successfully once you specify the return type as any.

 const functionBuilder = (arg: string) : any => {
  if(arg === 'a'){
    return {
      f: (val: string) => { console.log(val)}
    }
  }
  return {
    f: (val: number) => {}
  }
}

This is how the code will be executed:

const f1 = functionBuilder('a');
 
f1.f("a");

If you run this code, the console will output the value 'a'.

When conditionals are used to infer function parameters in TypeScript, they may end up with the type 'never'

Answer №1

Answer №2

Answer №3

Similar questions

Issue occurs when a circle element is not following a div element on mouse

What is the best way to extract key/value pairs from an object in javascript that have a specific suffix?

Utilizing JavaScript to dynamically adjust the height of one div to match the height of another div

The function is failing to provide a return value

Enhancing State in React Component through Prop Update

Error message: Could not locate the class 'NunoMaduroCollisionAdaptersLaravelCollisionServiceProvider'

Angular identifies when a user navigates away from a page

Tips for closing the stdio pipes of child processes in node.js?

What are the steps to modify the authorization header of an HTTP GET request sent from a hyperlink <a href> element?

How can I bring in a dynamic MaterialUI theme object from another file?

Is there a way to retrieve text from within a div using code behind in asp.net with c#?

Tips for effectively eliminating errors in a redux store

Uncertainty about the integration of a JavaScript file into a PHP file

The page will reset to the main page after any action is taken

Using createContext in React.tsx to pass the state through useState

What can cause the reactive value to fail to update in a Vue template?

What is causing the error message "may require a suitable loader" to appear when I add my TypeScript Node module to my Next.js application?

I aim to utilize JavaScript to capture the constantly changing font color that is randomly generated

I am struggling to add a list from these nested functions in Express, but for some reason, the items are not being properly

Problem with selecting items in Kendo UI Menu