Destructuring objects with default values from two related interfaces

Question

Destructuring objects with default values from two related interfaces

In my project, I have defined two interfaces called User and BankUser. The structure of the interface for BankUser looks like this:

interface BankUser extends User {
  banks: { [bank_id: string]: string};
  isSuper: boolean;
}

I am working on a function where I need to pass either a User or a BankUser, and I want the output to always be a BankUser. If the input is a User, it should automatically include the default properties for a BankUser.

const cleanedUser = (user: User | BankUser): BankUser => {
  const {uid, displayName, email, phoneNumber, photoURL, banks = {}, isSuper = false} = user;
  return {uid, displayName, email, phoneNumber, photoURL, banks, isSuper} as BankUser;
}

When trying to implement this function, I encountered two TS2339 errors stating that 'banks' and 'isSuper' do not exist on type User | BankUser. An example of the error message is:

TS2339: Property 'banks' does not exist on type User | BankUser

While adding // @ts-ignore above the function resolves the issue temporarily, I prefer to find a more elegant solution. Can someone suggest a better way to handle this situation?

typescript

Answer 1

Answer №1

When dealing with TypeScript, it is important to note that the compiler does not like looking up a property of an object if it's not explicitly defined in the object's type. In this situation, the User type does not explicitly mention the properties banks or isSuper, resulting in a compiler error. Although a BankUser may have these properties, when working with a variable that could be either a User or a BankUser, TypeScript considers it an error.

To resolve this issue and inform the compiler about the expected properties, you can treat the variable as something more specific than just User | BankUser. One approach is to use

User & Partial<BankUser>

, which ensures all properties of User are present along with optional properties from BankUser.

const cleanedUser = (user: User | BankUser): BankUser => {
    const {
        uid, displayName, email, phoneNumber, photoURL, banks = {}, isSuper = false
    } = user as User & Partial<BankUser>; // no error now
    return { uid, displayName, email, phoneNumber, photoURL, banks, isSuper };
}

Another way to implement cleanedUser is by using spread syntax:

const cleanedUser2 = (user: User | BankUser): BankUser => {
    return { banks: {}, isSuper: false, ...user };
}

This method requires less type manipulation and includes less typing. However, caution is advised when dealing with variables that may have additional properties beyond what is specified in their types, as unexpected behavior can occur.

It's crucial to handle cases where a value might possess extra properties that aren't explicitly defined in its type. Failure to do so can lead to unpredictable results during operations:

interface Hmm extends User {
    isSuper: number;
}
const hmm: Hmm = {
    uid: "", email: "", displayName: "", phoneNumber: "", photoURL: "", isSuper: 100
};
const beCareful = cleanedUser(hmm);
console.log(beCareful.isSuper) // Boolean at compile time, number at runtime !!!

Always exercise caution to avoid unexpected outcomes.

I hope this explanation helps you navigate through TypeScript more effectively. Good luck!

Link to code

Answer 2

When dealing with TypeScript, it is important to note that the compiler does not like looking up a property of an object if it's not explicitly defined in the object's type. In this situation, the User type does not explicitly mention the properties banks or isSuper, resulting in a compiler error. Although a BankUser may have these properties, when working with a variable that could be either a User or a BankUser, TypeScript considers it an error.

To resolve this issue and inform the compiler about the expected properties, you can treat the variable as something more specific than just User | BankUser. One approach is to use

User & Partial<BankUser>

, which ensures all properties of User are present along with optional properties from BankUser.

const cleanedUser = (user: User | BankUser): BankUser => {
    const {
        uid, displayName, email, phoneNumber, photoURL, banks = {}, isSuper = false
    } = user as User & Partial<BankUser>; // no error now
    return { uid, displayName, email, phoneNumber, photoURL, banks, isSuper };
}

Another way to implement cleanedUser is by using spread syntax:

const cleanedUser2 = (user: User | BankUser): BankUser => {
    return { banks: {}, isSuper: false, ...user };
}

This method requires less type manipulation and includes less typing. However, caution is advised when dealing with variables that may have additional properties beyond what is specified in their types, as unexpected behavior can occur.

It's crucial to handle cases where a value might possess extra properties that aren't explicitly defined in its type. Failure to do so can lead to unpredictable results during operations:

interface Hmm extends User {
    isSuper: number;
}
const hmm: Hmm = {
    uid: "", email: "", displayName: "", phoneNumber: "", photoURL: "", isSuper: 100
};
const beCareful = cleanedUser(hmm);
console.log(beCareful.isSuper) // Boolean at compile time, number at runtime !!!

Always exercise caution to avoid unexpected outcomes.

I hope this explanation helps you navigate through TypeScript more effectively. Good luck!

Link to code

Destructuring objects with default values from two related interfaces

Answer №1

Similar questions

The functionality of Angular 6 Material Nested Tree is disrupted when attempting to use dynamic data

What is the functionality of input onChange in React when using state management?

Issues with the functionality of Angular 5 EventEmitter

Having difficulty initializing a new BehaviourSubject

Encountering CORS error when making a call to AWS API from Angular 9

What is the method for creating pipes that filter multiple columns?

What is the best way to access all the attributes (excluding methods) of an object in a class instance?

The expected React component's generic type was 0 arguments, however, it received 1 argument

Discover the data type of the subfield within an interface or type in Typescript

What is the method for defining the type of a variable without assigning a value to it?

The interpolated string type is not allowed to be utilized for indexing a record that has the identical type as the key

What role does typescript play in this approach?

What is the best way to define multiple variables in ionic 2 using Angular2 and TypeScript?

Issues with the typings for the toPromise function in WebStorm have been identified

Comparing values between two JSON objects in Angular 8: A guide

When using React and Material UI, there seems to be an issue with the Popover component where calling `setAnchorEl(null)` on the onClose event does not properly

What is causing the Typescript compiler to interpret an element in a string array as the type 'never'?

Do we need to import Vue in every component when using Nuxt with TypeScript?

Issue with populating virtual IDs in NestJS mongoose schema containing an array of schemas

I am looking for a guideline that permits me to restrict the use of a form validation tool