Restricting union types by a specific property

Question

Restricting union types by a specific property

I'm facing an issue when attempting to narrow down a type based on a property. To explain it better, here's a simplified version in code:

type User = {
  id: number;
  name: string;
}

type CreateUser = {
  name?: string;
}

const user: User | CreateUser = { name: "Foo Bar" };

if (user.id) {
  console.log(`Hello ${user.name}`)
}

My thought process is that user could be either a User or a CreateUser, and we can differentiate based on the presence of the id property. However, this approach fails with the error message:

Property 'id' does not exist on type 'CreateUser'

. Additionally, user.name remains as string | undefined instead of just being a string. Is there a way to achieve this that I am missing?

Surprisingly, even this approach doesn't work:

if ("id" in user) {
  console.log(`Hello ${user.name}`)
}

This results in

Property 'name' does not exist on type 'never'.

.

typescript

Answer 1

Answer №1

When you specify a type annotation and initialize a value, the compiler is intelligent enough to narrow down the value to the type you use for initialization. For instance, if you initialize it with a type that only has the name property and lacks the id property, the compiler will narrow it to the CreateUser type:

const user: User | CreateUser = { name: 'Foo Bar' };

user;
//^? const user: CreateUser

If you want to prevent this automatic narrowing and maintain the union information in the same scope, you can use an assertion instead of an annotation:

const user = { name: 'Foo Bar' } as User | CreateUser;

if ('id' in user) {
          //^? const user: User | CreateUser
  console.log(`Hello ${user.name}`);
                     //^? const user: User
}

TS Playground

Replying to your comment:

This approach is also valid when exporting a value. The key is that whenever you assign a value to the variable and wish to retain the entire union type in that scope, you must utilize an assertion to overwrite the compiler's automatic narrowing behavior:

TS Playground

export let user: User | CreateUser;

user = { name: 'Foo Bar' } as User | CreateUser;

if ('id' in user) {
          //^? const user: User | CreateUser
  console.log(`Hello ${user.name}`);
                     //^? const user: User
}

If this process becomes cumbersome, you can create an alias for the union type:

export type AnyUser = User | CreateUser;

export let user: AnyUser;

user = { name: 'Foo Bar' } as AnyUser;

Answer 2

When you specify a type annotation and initialize a value, the compiler is intelligent enough to narrow down the value to the type you use for initialization. For instance, if you initialize it with a type that only has the name property and lacks the id property, the compiler will narrow it to the CreateUser type:

const user: User | CreateUser = { name: 'Foo Bar' };

user;
//^? const user: CreateUser

If you want to prevent this automatic narrowing and maintain the union information in the same scope, you can use an assertion instead of an annotation:

const user = { name: 'Foo Bar' } as User | CreateUser;

if ('id' in user) {
          //^? const user: User | CreateUser
  console.log(`Hello ${user.name}`);
                     //^? const user: User
}

TS Playground

Replying to your comment:

This approach is also valid when exporting a value. The key is that whenever you assign a value to the variable and wish to retain the entire union type in that scope, you must utilize an assertion to overwrite the compiler's automatic narrowing behavior:

TS Playground

export let user: User | CreateUser;

user = { name: 'Foo Bar' } as User | CreateUser;

if ('id' in user) {
          //^? const user: User | CreateUser
  console.log(`Hello ${user.name}`);
                     //^? const user: User
}

If this process becomes cumbersome, you can create an alias for the union type:

export type AnyUser = User | CreateUser;

export let user: AnyUser;

user = { name: 'Foo Bar' } as AnyUser;

Answer 3

Answer №2

Here's a useful code snippet:

function validateUser(user: User | NewUser): user is User {
  return (user as User).id !== undefined;
}

if (validateUser(user) {
  console.log(`Welcome back, ${user.name}!`)
}

Discovered on https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates.

Answer 4

Here's a useful code snippet:

function validateUser(user: User | NewUser): user is User {
  return (user as User).id !== undefined;
}

if (validateUser(user) {
  console.log(`Welcome back, ${user.name}!`)
}

Discovered on https://www.typescriptlang.org/docs/handbook/2/narrowing.html#using-type-predicates.

Restricting union types by a specific property

Answer №1

Answer №2

Similar questions

Add a service to populate the values in the environment.ts configuration file

Refreshing a page in Angular 4/5 using TypeScript

Unlock the Power of Typography in React with Material UI Styled Components

What is the best way to create an instance method in a subclass that can also call a different instance method?

Is it possible to define TypeScript interfaces in a separate file and utilize them without the need for importing?

The CSS scale property is not working as expected when used in a React.js application, specifically

Attaching dynamic data to a specific element within an array

Issue with handsontable numbro library occurs exclusively in the production build

Angular2 encountering a lack of service provider issue

Fast + Vue3 + VueRouter Lazy Load Routes According to Files

"Utilizing Firebase Functions to update information in the Firebase Realtime Database on a daily basis

Transforming named functions in const or class constructors with Eslint and Typescript: a guide

Adjusting canvas height in Storybook - Component does not fit properly due to low canvas height

Tips for accessing and adjusting an ngModel that is populated by an attribute assigned via ngFor

Using string interpolation and fetching a random value from an enum: a comprehensive guide

I am experiencing issues with my Angular2 project where not all of my component variables are being passed to the

Connecting Multiple Relationships with Many-To-Many Matches

Is there a way to access every item that includes a particular attribute and attribute term within the woocommerce-rest-api?

Using TypeScript to destructure by providing types

The parameter type SetStateAction<MemberEntityVM[]> cannot be assigned the argument type Promise<MemberEntityVM[]> in this context