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.
The subsequent type is IUser, aligning with predictions.

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.
The subsequent type is IUser, aligning with predictions.

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

What methods can I employ to trace anonymous functions within the Angular framework?

Async function is improperly updating the array state by overwriting it completely instead of just updating one item as

Angular 6's Select feature is failing to properly update user information

I am experiencing issues with my HTML select list not functioning properly when utilizing a POST service

Communicating Progress Updates from C# to Angular 6 Using HttpPost

Combining TypeScript and ReactJS with RequireJS: A guide to importing react-dom in TypeScript

What is the best way to handle constants in TypeScript?

Disappearing Ionic React useState value issue encountered when passing it as a prop parameter in a function

Guidelines for utilizing NgFor with Observable and Async Pipe to create Child Component once the data has been loaded

Steps for importing a CommonJS module that exports as a callable into TypeScript

Dayjs is failing to retrieve the current system time

Error Alert: "Invariant Violation" detected in a TypeScript program utilizing React

RXJS: Introducing a functionality in Observable for deferred execution of a function upon subscription

define a variable within a v-for loop

What is the best way to destructure a blend of React props and my own custom props in my code?

Utilizing TypeScript 3.1: Easier Array Indexing with Enums in Strict Mode

Tips for Validating Radio Buttons in Angular Reactive Forms and Displaying Error Messages upon Submission

Encountering an issue with Angular 13 routing where extraction of property fails when returning value as an observable

Different ways to separate an axios call into a distinct method with vuex and typescript

Error in TypeScript when utilizing an Enum as a string