Typescript - How to to create array with multiple types

Question

I have one common interface and two interfaces "Person" and "Employee" that extend the first one:

    export interface Common {
        id: number,
        name: string
      }

      export interface Person extends Common {
        age: number;
      }

      export interface Employee extends Common {
        role: string;
      }

I need to have an array mixed with these interfaces, for example this:

listOfPeople: Person[] | Employee[] = [{id: 1, name: 'George', age: 4}, {id: 2, name: 'Micheal', role: 'software developer'}];

but in this way I got an error. What's the correct way for obtaining the result that I desire?

If someone really experienced with typescript comes along, I kinda want to append this to the question: is it worth making an array of multiple types like this? My guess is that it probably depends on the application, but my gut instinct tells me there's going to be a lot of headaches down the road, and that 9 times out of 10, it's just better to make something like a PersonOrEmployee type with optional age? and role? parameters. But again, I'm VERY unsure. — Michael Hoobler
– Michael Hoobler, Commented Apr 21, 2021 at 9:23
@MichaelHoobler You've got a point. When you for-loop Array<Person|Employee> you cannot item.age or item.role because Person and Employee do not have those keys in common. However, if you introduce PersonOrEmployee you can check item.age and item.role and do like this if (item.age) { (item as Person) } else {.(item as Employee) } — glinda93
– glinda93, Commented Apr 21, 2021 at 11:19

samuellawrentz · Accepted Answer · 2021-04-21 09:14:41Z

7

You can combine the types and declare them as the type for the listOfPeople using the union type.

So this would work I guess

listOfPeople: (Person|Employee)[]

Because listOfPeople is an array that can contain any of these. You must let TS know that it is an array.

const listOfPeople: (Person|Employee)[] = [{id: 1, name: 'George', age: 4}, {id: 2, name: 'Micheal', role: 'software developer'}];

edited Apr 21, 2021 at 9:14

answered Apr 21, 2021 at 9:08

samuellawrentz

1,73214 silver badges23 bronze badges

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

Comments

rasmusvhansen · Accepted Answer · 2021-04-21 11:05:32Z

2

Another (maybe clearer) way of writing this type would be:

listOfPeople: Array<Person | Employee>;

answered Apr 21, 2021 at 11:05

rasmusvhansen

1,5621 gold badge12 silver badges13 bronze badges

Collectives™ on Stack Overflow

Typescript - How to to create array with multiple types

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related