The narrowing of Union types in Typescript is not possible when it is based on

Question

The narrowing of Union types in Typescript is not possible when it is based on

I'm facing an issue with narrowing down a union type in typescript.

Let's say we have two interfaces and a union:

interface A {
    flag: true
    callback: (arg: string) => void
}

interface B {
    flag?: false
    callback: (arg: number) => void
}

type AB = A | B

This is narrowed down correctly:

const testA: AB = {
    flag: true,
    callback: arg => {
        // typescript recognizes this as interface A and arg as a string
    }
}

const testB: AB = {
    flag: false,
    callback: arg => {
        // typescript identifies this as interface B and arg as a number
    }
}

However, this scenario does not work:

const testC: AB = {
    // flag is implied as undefined
    callback: arg => {
        // typescript cannot determine if this is A or B
        // arg is implicitly any
    }
}

What could I be missing?

Here is a link to typescript playground

Thank you in advance

typescript

Answer 1

Answer №1

// Encountered an error on testC, where 'number' was not accepted as a type for 'string'
const testC: AB = {
  flag: undefined,
  callback: (arg: string) => {
  }
}

// The same error occurred again
const testC: AB = {
  callback: (arg: string) => {
  }
}

Interestingly:

interface B {
  flag: false | undefined;
  callback: (arg: number) => void
}

// Received an error saying that the type '{ callback: (arg: any) => void; }' cannot be assigned to type 'AB'.
//   It was expected to have property 'flag' in type '{ callback: (arg: any) => void; }' but it is missing, which is required as per type 'B'.
const testC: AB = {
  callback: (arg) => {
  }
}

I find it curious that there might be a peculiar behavior related to how Typescript handles flag? versus flag: undefined. This could potentially be linked to an uncommon behavior that people are not accustomed to in JavaScript:

Object.keys({a: undefined}); // ['a']
Object.keys({}); // []

Answer 2

// Encountered an error on testC, where 'number' was not accepted as a type for 'string'
const testC: AB = {
  flag: undefined,
  callback: (arg: string) => {
  }
}

// The same error occurred again
const testC: AB = {
  callback: (arg: string) => {
  }
}

Interestingly:

interface B {
  flag: false | undefined;
  callback: (arg: number) => void
}

// Received an error saying that the type '{ callback: (arg: any) => void; }' cannot be assigned to type 'AB'.
//   It was expected to have property 'flag' in type '{ callback: (arg: any) => void; }' but it is missing, which is required as per type 'B'.
const testC: AB = {
  callback: (arg) => {
  }
}

I find it curious that there might be a peculiar behavior related to how Typescript handles flag? versus flag: undefined. This could potentially be linked to an uncommon behavior that people are not accustomed to in JavaScript:

Object.keys({a: undefined}); // ['a']
Object.keys({}); // []

Answer 3

Answer №2

Using flag? signifies the potential non-existence of a value.

When flag? is set to false, it actually translates to flag: false | undefined, rather than simply indicating the absence of the flag property.

const exampleVar: XYZ = {
    flag: undefined,
    callback: argument => {
        // TypeScript recognizes that this falls under interface B and that argument is a number
    }
}

Answer 4

Using flag? signifies the potential non-existence of a value.

When flag? is set to false, it actually translates to flag: false | undefined, rather than simply indicating the absence of the flag property.

const exampleVar: XYZ = {
    flag: undefined,
    callback: argument => {
        // TypeScript recognizes that this falls under interface B and that argument is a number
    }
}

The narrowing of Union types in Typescript is not possible when it is based on

Answer №1

Answer №2

Similar questions

Expanding a specific segment of a discriminated union

Postman is having trouble communicating with an express router and is unable to send requests

Filtering arrays of objects dynamically using Typescript

Using React and Typescript: Populating an array within a For Loop using setTimeout is not happening sequentially or at all

Stop the print dialog box from appearing when using the Ctrl + P shortcut

What is the reason behind TypeScript prohibiting the assignment of a className property to a context provider?

Using Ionic 3 to create a list view that includes buttons linked to the items clicked

Navigating through pop-ups in Chrome: A guide to using Protractor

Converting JSON objects into TypeScript classes: A step-by-step guide

Having trouble opening a modal view from an action sheet button

Tips for testing the setTimeout function within the ngOnInit using Jasmine

Utilizing Gulp to Convert TypeScript Exports into a JSON File

Error encountered when running protractor cucumber test: SyntaxError due to an unexpected token {

The properties of the extended Array class in TypeScript are not able to be accessed

Concealing a column within an Angular Material table

Utilizing React with Typescript: A guide to working with Context

Function input custom operator in RxJs

What steps should I take to choose esNext from the typescript menu within visual studio 2017?

Angular - optimizing performance with efficient HTTP response caching tactics

No overload error encountered with TypeScript function call