Switch statements in TypeScript may not function properly with type guards when assigning an object to a variable

Question

Switch statements in TypeScript may not function properly with type guards when assigning an object to a variable

I'm puzzled as to why the type guard is not working in the example provided below...

Considering the following interfaces:

interface ParamA {
    name: 'A';
    aaa: boolean;
}

interface ParamB {
    name: 'B';
    bbb: number;
}

Working Properly

function func(param: ParamA | ParamB) {
    switch (param.name) {
        case 'A':
            const aaa = param.aaa;
            console.log(aaa); // boolean
            break;
        case 'B':
            const bbb = param.bbb;
            console.log(bbb); // number
            break;
        default:
            break;
    }
}

Not Working Properly

function func(param: ParamA | ParamB) {
    const name = param.name; // just rewrite here
    switch (name) {
        case 'A':
            const aaa = param.aaa;
           
            console.log(aaa);
            break;
        case 'B':
            const bbb = param.bbb;
           
            console.log(bbb);
            break;
        default:
            break;
    }
}

The compiler throws errors like

Property 'aaa' does not exist on type 'ParamB'.

I fail to see why there would be a difference in behavior depending on whether it's stored in a variable or accessed directly.

This code is using TypeScript version 2.8.3.

Could someone shed some light on this issue?

typescript

Answer 1

Answer №1

Latest Update as of August 2021:

The latest version of Typescript (4.4) has introduced smarter features, making your examples work seamlessly without any additional configurations required :-)

Prior Response

When you assign a property to a variable, it breaks the connection with the object. This can be confusing for the compiler since you could alter the string and object variable independently:

var param: ParamA | ParamB;
param = someParamA;
const name = param.name;
param = someParamB;
switch (name) { // potential issues here

If you are certain that the variable has not been changed, you may consider using type assertion, although I recommend avoiding it for easier maintenance.

Answer 2

Latest Update as of August 2021:

The latest version of Typescript (4.4) has introduced smarter features, making your examples work seamlessly without any additional configurations required :-)

Prior Response

When you assign a property to a variable, it breaks the connection with the object. This can be confusing for the compiler since you could alter the string and object variable independently:

var param: ParamA | ParamB;
param = someParamA;
const name = param.name;
param = someParamB;
switch (name) { // potential issues here

If you are certain that the variable has not been changed, you may consider using type assertion, although I recommend avoiding it for easier maintenance.

Answer 3

Answer №2

switch statement acts as a type guard in the 'good' code snippet, but not in the 'bad' one.

I believe there should be consistency in behavior regardless of whether I assign it to a variable or not.

The difference lies not in behavior, but in how TypeScript interprets the code. Due to static analysis, the ways in which the type of param can be narrowed down are restricted.

In order for param to be inferred as either ParamA or ParamB, it must be explicitly stated in a type guard. Since this was not done for param but was done for the name variable, param will not be narrowed down and its type will need to be asserted in such cases:

...
switch (name) {
    case 'A':
        const aaa = (<ParamA>param).aaa;
...

Answer 4

switch statement acts as a type guard in the 'good' code snippet, but not in the 'bad' one.

I believe there should be consistency in behavior regardless of whether I assign it to a variable or not.

The difference lies not in behavior, but in how TypeScript interprets the code. Due to static analysis, the ways in which the type of param can be narrowed down are restricted.

In order for param to be inferred as either ParamA or ParamB, it must be explicitly stated in a type guard. Since this was not done for param but was done for the name variable, param will not be narrowed down and its type will need to be asserted in such cases:

...
switch (name) {
    case 'A':
        const aaa = (<ParamA>param).aaa;
...

Switch statements in TypeScript may not function properly with type guards when assigning an object to a variable

Answer №1

Latest Update as of August 2021:

Prior Response

Answer №2

Similar questions

Error: Trying to access the 'blogpost' property of an undefined variable results in a TypeError while executing the NPM RUN BUILD command in Next.js

Utilizing dynamic arguments in TypeScript to recycle types

Error: Model attribute missing in Adonis JS v5 relationship

"An issue has been identified where TSLint and VSCode fail to display red underlines in

The essential guide to creating a top-notch design system with Material UI

Attempting to retrieve a file from the database with the utilization of Angular 5 and ASP.NET Core

Encountering a type discrepancy issue when attempting to send a message to the SQS queue

Verify in Typescript if there is at least one value supplied

Tips for making use of incomplete types

How to trigger a click event in React using TypeScript and material-ui library

The solution to automatically delete orphaned rows in TypeORM

Jest does not support the processing of import statements in typescript

What is the best way to assign the value of an HTTP GET request to a subarray in Angular 8

using props as arguments for graphql mutation in react applications

Receiving JSON data in TypeScript and displaying it in a structured table format

Combining all code in Electron using Typescript

Guide on transferring data from one table to another by choosing one or multiple rows with the help of Angular 2

Express throwing module errors

Prevent redundancy by caching svg icons to minimize repeated requests

Function that yields promise result