The Problem with TypeScript Union Types

Question

The Problem with TypeScript Union Types

I recently started using TypeScript and ran into an issue with a similar scenario. Despite my efforts, I encountered two errors that I can't seem to figure out. If anyone has any insights on how to resolve this, I would greatly appreciate the help!

interface Foo {
    [key: string]: number
};
interface Bar {
    [key: string]: { positive: number, negative: number }
}

// const obj: Foo | Bar = {
//     usa: { positive: 5, negative: 3 },
//     uk: { positive: 4, negative: 1 },
//     fr: { positive: 8, negative: 2 },
// }

const obj: Foo | Bar = {
    usa: 5,
    uk: 3,
    fr: 2,
}

Object.keys(obj).map(key => {
    const val = 'positive' in obj[key] ? obj[key].positive : obj[key];
    alert(val);
})

The errors that are troubling me are:

https://i.sstatic.net/9qC5S.png

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

javascript typescript

Answer 1

Answer №1

Implementing user defined type guards allows you to inform the compiler that your check is intended to narrow down the type. However, this method is applicable only to variables and not expressions, so you must first assign it to a separate variable.

interface Foo {
    [key: string]: number
};

interface PosNeg {
    positive: number
    negative: number
}

interface Bar {
    [key: string]: PosNeg
}

type FooBar = Foo | Bar

type PossibleValues = FooBar[keyof FooBar]

function isPosNeg(item: PossibleValues): item is PosNeg {
    return typeof item !== "number"
}

const obj: FooBar = {
    usa: 5,
    uk: 3,
    fr: 2,
}

Object.keys(obj).map(key => {
    const item = obj[key]
    const val = isPosNeg(item) ? item.positive : item;
    alert(val)
})

Answer 2

Implementing user defined type guards allows you to inform the compiler that your check is intended to narrow down the type. However, this method is applicable only to variables and not expressions, so you must first assign it to a separate variable.

interface Foo {
    [key: string]: number
};

interface PosNeg {
    positive: number
    negative: number
}

interface Bar {
    [key: string]: PosNeg
}

type FooBar = Foo | Bar

type PossibleValues = FooBar[keyof FooBar]

function isPosNeg(item: PossibleValues): item is PosNeg {
    return typeof item !== "number"
}

const obj: FooBar = {
    usa: 5,
    uk: 3,
    fr: 2,
}

Object.keys(obj).map(key => {
    const item = obj[key]
    const val = isPosNeg(item) ? item.positive : item;
    alert(val)
})

The Problem with TypeScript Union Types

Answer №1

Similar questions

Amchart 5: Tracking Cursor Movement on the X Axis

Having trouble retrieving the iframe document using JavaScript

Steering clear of the generic Function type in React with TypeScript

Increase the height of an element based on the content of the text within

A comparison of Vue's import paths: exploring the variations

UI-Router is failing to transition states when $state.go() is called

Expanding the size of a JavaScript array by adding fields

A TypeScript class designed to serve as a function type as well

When using jQuery with a large selectbox, you may encounter the error message: "Uncaught RangeError: Maximum

Replace the current picture with a newly uploaded one and keep it consistent

What's the best way to test a TSX file importing SCSS using Jest?

The state of the button remains unchanged in jQuery/Rails 3

What is the best way to pass a Python string to a JavaScript script?

How can I create a top right profile button similar to Google using AngularJS?

What are the methods for incorporating reflection into three.js?

Filtering with multiple attributes in Angular using GroupBy

Is it no longer possible to create custom linked Context Menus in Tabulator 5?

Dynamic sidebar that adheres to the content and is placed alongside it using JavaScript

Adjust the hue of a circle based on whether the user's position falls within its designated range

Determining the file path in HTML5