TypeScript - Combining multiple interfaces into just one

Question

I have few interfaces I want to combine into just only one interface: Member:

interface Person {
  name?: {
    firstName?: string;
    lastName?: string;
  };
  age: number;
  birthdate?: Date;  
}

interface User {
  username: string;
  email: string;
}

interface Player {
  room: number;
  group?: number;
}

My question is: how can I create a new interface: Member by combining the above interfaces, so I end up having the following:

interface Member {
  firstName: string;
  lastName: string;
  age: number;
  birthdate?: Date;  
  username: string;
  email: string;
  room: number;
  group?: number;
}

Please, notice that the structure has changed a bit. For example, fields inside: Person["name"] are now included directly on the root level on the new interface. Also, those fields are now mandatory (they were optional before).

Thanks!

hoangdv · Accepted Answer · 2019-12-02 07:44:08Z

11

Make Person interface to a "flaten" interface, let's create new interface called PersonName, the new interface will be like:

interface PersonName {
  firstName?: string;
  lastName?: string;
}

then, Person interface will come to:

interface Person {
  name?: PersonName;
  age: number;
  birthdate?: Date;
}

Finally, Member interface has been defined with syntax like:

interface Member extends Player, User, Omit<Person, 'name'>, PersonName  {}

All of code: Playground

answered Dec 2, 2019 at 7:44

hoangdv

16.3k4 gold badges31 silver badges54 bronze badges

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

Comments

nickbullock · Accepted Answer · 2019-12-02 07:46:49Z

2

Now firstName and lastName are mandatory

interface Member extends User, Player, Omit<Person, 'name'> {
  firstName: string;
  lastName: string;
}

edited Dec 2, 2019 at 7:46

answered Dec 2, 2019 at 7:38

nickbullock

6,62913 silver badges29 bronze badges

Comments

Mx.Wolf · Accepted Answer · 2019-12-02 07:36:14Z

1

You can use union of types to create a Member type definition. It will not be an interface. That is it creates an alias to types rather than new type. Yet it clearly shows the origin of the type and its members

type Member = Person["name"] & Pick<Person, "age" | "birthdate">
  & User & Player

to define the interface you extend those types

type T1 = Required<Person> ["name"]
interface Member extends
  T1,
  Pick<Person, "age" | "birthdate">,
  User,
  Player { }

another version of the picture is to use exclude construct

type T1 = Required<Person> ["name"]
interface Member extends
  T1,
  Pick<Person, Exclude<keyof Person,"name">>,
  User,
  Player { }

This allow you to modify propertis of Person and changes will propagate to the Member interface.

To make first and last name mandatory, that is required you mention this

type T1 = Required<Required<Person> ["name"]>

edited Dec 2, 2019 at 7:36

answered Dec 2, 2019 at 7:23

Mx.Wolf

6786 silver badges14 bronze badges

1 Comment

Viewsonic Over a year ago

how can I make: firstName and lastName mandatory? they were optional on the original interfaces

Collectives™ on Stack Overflow

TypeScript - Combining multiple interfaces into just one

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related