Unable to retrieve a property from a variable with various data types

Question

Unable to retrieve a property from a variable with various data types

In my implementation, I have created a versatile type that can be either of another type or an interface, allowing me to utilize it in functions.

type Value = string | number
interface IUser { name: string, id: string }
export type IGlobalUser = Value | IUser;

When I require a function parameter to be of type IGlobalUser, I naturally expect to access the properties of the interface IUser. For example:

foo(user: IGlobalUser) { alert(user.name) }

Unfortunately, TypeScript throws an error:

Property 'name' does not exist on type 'string | number | IUser'.   
Property 'name' does not exist on type 'string'.

I am aiming for the function to accept both Value and IUser seamlessly. Any suggestions on how to make this happen?

typescript

Answer 1

Answer №1

To determine whether a variable is of a certain type, you can utilize User-Defined Type Guards.

type Value = string | number
interface IUser { name: string, id: string }
export type IGlobalUser = Value | IUser;

function isUser(checkObj: IGlobalUser): checkObj is IUser {
  const optionalUser = checkObj as IUser;
  
  return isObject(optionalUser) && 
    optionalUser.id !== undefined && 
    optionalUser.name !== undefined;
}

function foo(user: IGlobalUser) {

  if (isUser(user)) {
    alert(user.name);
  }
} 

function isObject(obj: any) {
  return obj !== null && typeof obj === 'object';
}

The function isUser takes in a parameter of type IGlobalUser, and checks if it's an IUser. This allows for runtime type checking.

While this translates to regular JavaScript, TypeScript recognizes the function's role in determining types. Using the user defined guard function informs TypeScript about the variable's type.

Within VS Code:

The initial type is IGlobalUser, confirming expectations.

https://i.sstatic.net/KM8NI.png
The subsequent type is IUser, aligning with predictions.

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

Upon conversion to JavaScript, the code will include the isUser function and corresponding conditional statements. Including a check like this within your codebase is beneficial regardless. Defining it through a Type Guard ensures both runtime validation and enhanced TypeScript feedback based on the identified scenarios.

Answer 2

To determine whether a variable is of a certain type, you can utilize User-Defined Type Guards.

type Value = string | number
interface IUser { name: string, id: string }
export type IGlobalUser = Value | IUser;

function isUser(checkObj: IGlobalUser): checkObj is IUser {
  const optionalUser = checkObj as IUser;
  
  return isObject(optionalUser) && 
    optionalUser.id !== undefined && 
    optionalUser.name !== undefined;
}

function foo(user: IGlobalUser) {

  if (isUser(user)) {
    alert(user.name);
  }
} 

function isObject(obj: any) {
  return obj !== null && typeof obj === 'object';
}

The function isUser takes in a parameter of type IGlobalUser, and checks if it's an IUser. This allows for runtime type checking.

While this translates to regular JavaScript, TypeScript recognizes the function's role in determining types. Using the user defined guard function informs TypeScript about the variable's type.

Within VS Code:

The initial type is IGlobalUser, confirming expectations.

https://i.sstatic.net/KM8NI.png
The subsequent type is IUser, aligning with predictions.

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

Upon conversion to JavaScript, the code will include the isUser function and corresponding conditional statements. Including a check like this within your codebase is beneficial regardless. Defining it through a Type Guard ensures both runtime validation and enhanced TypeScript feedback based on the identified scenarios.

Answer 3

Answer №2

The function is designed to handle both Value and IUser. TypeScript is alerting you that it's unable to determine whether the type of user is a string, number, or IUser, and in the first two scenarios, user doesn't contain the property name.

To resolve this issue, apply a typeof type guard to distinguish between the cases so that the compiler stops generating complaints:

type Value = string | number
interface IUser { name: string, id: string }
type IGlobalUser = Value | IUser;

function bar(user: IGlobalUser) { 
    if (typeof user === 'object') {
        console.log(`IUser: ${user.name}`);
    } else {
        console.log(`string or number: ${user}`);
    }
} 

bar({ name: 'John Doe', id: '42'});
bar('Jane Doe');
bar(43);

Try it out here online.

Answer 4

The function is designed to handle both Value and IUser. TypeScript is alerting you that it's unable to determine whether the type of user is a string, number, or IUser, and in the first two scenarios, user doesn't contain the property name.

To resolve this issue, apply a typeof type guard to distinguish between the cases so that the compiler stops generating complaints:

type Value = string | number
interface IUser { name: string, id: string }
type IGlobalUser = Value | IUser;

function bar(user: IGlobalUser) { 
    if (typeof user === 'object') {
        console.log(`IUser: ${user.name}`);
    } else {
        console.log(`string or number: ${user}`);
    }
} 

bar({ name: 'John Doe', id: '42'});
bar('Jane Doe');
bar(43);

Try it out here online.

Answer 5

Answer №3

Using JavaScript solution is more efficient in terms of runtime performance

foo(user: IrGlobalUser) {
  alert((typeof user === 'object') && user.name)
}

On the other hand, TypeScript solution only works during compile time

foo(user: IrGlobalUser) {
  alert((user as IUser).name)
}

Answer 6

Using JavaScript solution is more efficient in terms of runtime performance

foo(user: IrGlobalUser) {
  alert((typeof user === 'object') && user.name)
}

On the other hand, TypeScript solution only works during compile time

foo(user: IrGlobalUser) {
  alert((user as IUser).name)
}

Unable to retrieve a property from a variable with various data types

Answer №1

Answer №2

Answer №3

Similar questions

Having difficulty grasping the significance of the data received from the API response

Interfaces and Accessor Methods

Stop committing changes in Git when there are any TypeScript errors found

Struggling with fetching the email value in .ts file from ngForm in Angular?

Cannot proceed with module import: Type 'ModuleWithProviders<T>' must have a single type argument

Component re-rendering and initializing useReducer

Tips for validating email addresses and enforcing minimum length requirements

I am working on an Angular application that includes a dynamic form for an attendance system for employees. I am currently trying to figure out how to generate the JSON data

What is the best way to represent a state with two possible fields in React using TypeScript?

Create a union type by utilizing indices of an array type

The repository's dependencies remain unresolved by Nest

Detecting if a string is in sentence or title case with a typeguard

substitute one item with a different item

custom field component for react-hook-form

Utilize rest parameters for destructuring操作

Unsynchronized state of affairs in the context of Angular navigation

What is the best way to test for errors thrown by async functions using chai or chai-as-promised?

I am interested in using a loop in Angular to highlight my div element

What is the process for generating a fresh PSBT transaction using bitcoinjs-lib?

Using both Typescript and Javascript, half of the Angular2 application is built