Working with multiple interface and single common field in Angular

Question

I have 2 different components,component A uses model A and component B uses model B. Now A has an id and component B should be using that id to process its method. So if I want that same id in Model B, is that possible?

Model A
export interface A{ id: number,firstname: string, lastname: string}
Model B
export interface B {id: number, phone: number}

Or is it possible to add 'phone' to Model A as below?

export interface A{ id: number,firstname: string, lastname: string,phone: number}

But I get error as when it is called in the component A , phone is not used. What is the best way or practical way to fix this?

Answer 1

If it only the phone, you can add it to Model A like this:

export interface A{ id: number,firstname: string, lastname: string, phone?: number}

The question mark makes this field optional, so you can add a phone, but you don't need.

But I think the follow way is the best in your case, structured like you would in a database.

Model A
export interface A{ id: number,firstname: string, lastname: string, modelB?: B}
Model B
export interface B {id: number, phone: number}

Here we set the complete interface B as a child of A, so to say. These are the best ways and the best practice. By the way: Yes, you can "change" types and interfaces with typescript (add new property, remove one) but this is not a good thing... We build interfaces to structure our data for simple reusing and type safety. If we change interfaces - we doesn't need it; that's my opinion.