What is the reason behind Typescript not narrowing generic union type components when they are eliminated by type guards?

Question

What is the reason behind Typescript not narrowing generic union type components when they are eliminated by type guards?

Consider the following scenario where type definitions and function implementations are provided:

interface WithNumber {
  foo: number;
}

interface WithString {
  bar: string;
}

type MyType = WithNumber | WithString;

interface Parameter<C extends MyType = MyType> {
  container: C
} 

function isParameterWithNumberContainer(arg: Parameter): arg is Parameter<WithNumber> {
  return typeof (arg.container as WithNumber).foo === "number";
}

function test(arg: Parameter<WithNumber | WithString>) {
  if (isParameterWithNumberContainer(arg)) {
    arg.container.foo;
    return;
  }
  /*
   * Error:
   *   Property 'bar' does not exist on type 'MyType'.
   *     Property 'bar' does not exist on type 'WithNumber'.
   */
  arg.container.bar;
}

Why doesn't TypeScript narrow down the type of arg below the if-block secured with a type guard? It seems clear that arg can only be a Parameter<WithString>. However, TypeScript still considers it as a

Parameter<WithNumber | WithString>

, leading to an error when trying to access arg.container.bar.

TS Playground link

typescript

Answer 1

Answer №1

Despite my extensive search efforts, I have been unable to locate the appropriate documentation regarding type guards and their functionality within if statements. From what I gather, the type defined in the then branch is excluded from a union type present in the else branch. It seems that the exclusion is not based on an in-depth analysis of the type itself. Moreover, since your parameter consists of a generic type with a union as its parameter, nothing will be excluded in the else branch.

To address this issue, one potential solution could be to modify the argument to be a union type:

function isParameterWithNumberContainer(arg: Parameter): arg is Parameter<WithNumber> {
    return typeof (arg.container as WithNumber).foo === "number";
}

function test(arg: Parameter<WithNumber> | Parameter<WithString>) {
    if (isParameterWithNumberContainer(arg)) {
        arg.container.foo;
        return;
    }
    arg.container.bar;
}

Answer 2

Despite my extensive search efforts, I have been unable to locate the appropriate documentation regarding type guards and their functionality within if statements. From what I gather, the type defined in the then branch is excluded from a union type present in the else branch. It seems that the exclusion is not based on an in-depth analysis of the type itself. Moreover, since your parameter consists of a generic type with a union as its parameter, nothing will be excluded in the else branch.

To address this issue, one potential solution could be to modify the argument to be a union type:

function isParameterWithNumberContainer(arg: Parameter): arg is Parameter<WithNumber> {
    return typeof (arg.container as WithNumber).foo === "number";
}

function test(arg: Parameter<WithNumber> | Parameter<WithString>) {
    if (isParameterWithNumberContainer(arg)) {
        arg.container.foo;
        return;
    }
    arg.container.bar;
}

What is the reason behind Typescript not narrowing generic union type components when they are eliminated by type guards?

Answer №1

Similar questions

A React component featuring a nested map function should always include a "unique key" prop for each element

ts:Accessing the state within a Redux store

What is the process for configuring PhpStorm to sync with TypeScript tsconfig.json in .vue files?

Taunting a specific occurrence inside a group

Unexpected JSON end causes issue with DELETE request in Next.js version 13

React: a versatile and type-specific onChange() function

Is it considered best practice to pass an argument that represents an injectable service?

Analyzing a string using an alternative character

Strategies for capturing a module's thrown exception during loading process

Set up an event listener for when geolocation permission is approved

What does the reportProgress function do in HTTP services with JavaScript?

What is the best method for retrieving an item from localstorage?

Using Firebase with Angular 4 to fetch data from the database and show it in the browser

Tips for finding the displayRows paragraph within the MUI table pagination, nestled between the preceding and succeeding page buttons

Working with a function in the stylesheet of TypeScript in React Native allows for dynamic styling

Can someone point me to the typescript build option in Visual Studio 2019 Community edition?

Discovering a variable within an enzyme wrapper for the locate function

Dealing with nullable properties in Typescript

Tips for incorporating a child's cleaning tasks into the parent component

Unexpected Typescript error when React component receives props