How to add properties to an object when inheriting interfaces

Question

To sum up my problem, I have an interface, User with an 'attributes' object filled with properties. I have another interface SpecialUser in which the 'attributes' object needs to contain properties that are not present on User. Currently, the new attributes object is overwriting the old one. I can get it to work by pasting in all properties from the parent interface and then appending the later ones, but that's not the most ideal solution.

export interface User{
  attributes: {
     full_name: string;
  }
}

export interface SpecialUser extends User {
  attributes: {
     occupation: string;
  }
}

What I want is for SpecialUser's 'attributes' to contain the fields on User's 'attributes' in addition to its new properties (so it would contain both full_name and occupation). The actual result is complete overwrite.

skovy · Accepted Answer · 2019-09-13 17:40:47Z

3

One option is to use an intersection type.

interface User {
  attributes: {
    full_name: string;
  };
}

type SpecialUser = {
  attributes: {
    occupation: string;
  };
} & User;

const user: SpecialUser = {
  attributes: {
    occupation: "job",
    full_name: "name"
  }
};

TypeScript Playground

edited Sep 13, 2019 at 17:40

answered Sep 13, 2019 at 17:37

skovy

5,6502 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

lukasgeiter Over a year ago

This is called an intersection type not union type.

dotrey · Accepted Answer · 2023-07-21 09:19:06Z

Had the exact same problem, but wanted to keep it as interfaces and not types. This is similar to skovy's answer and only moves the intersection into the interface:

interface User {
  attributes: {
    full_name: string;
  };
}

interface SpecialUser extends User {
  attributes: {
    occupation: string;
  } & User["attributes"];
};

const user: SpecialUser = {
  attributes: {
    occupation: "job",
    full_name: "name"
  }
};

TypeScript Playground

Penny Liu · Accepted Answer · 2024-01-02 15:11:47Z

Would something like this fit your use case?

export interface User{
  attributes: {
     full_name?: string;
     occupation?: string;
  }
}

or since you're really modifying the attributes

export interface Attributes{
    full_name: string;
}

export interface SpecialAttributes extends Attributes {
    //has all other properties of original attributes (i.e. full_name)
    occupation: string;
}

export interface User{
    attributes: Attributes
}

export interface SpecialUser extends User {
    attributes: SpecialAttributes //overrides original attributes
}

Collectives™ on Stack Overflow

How to add properties to an object when inheriting interfaces

3 Answers 3

1 Comment

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Related