How to design relation between a class Bill and a class SimplifiedBill?

Question

So as the title mentions, I have SimplifiedBill, which has only date and finalPayment, and I also have Bill, which has same properties as SimplifiedBill, but also all the other details (taxes, user data, services, etc.).

A solution could be for Bill to inherit from SimplifiedBill, but I don't think that's conceptually correct, because SimplifiedBill is something that you get out of Bill, so Bill is not something "below" SimplifiedBill, it doesn't inherit anything from it.

Any ideas on how to implement a class design here?

EDIT: The process is the following.
I have a SimplifiedBill list that I get from the back, and when I click on one of them, I request and get from the api that Bill and go into a detailed view.

In case you're wondering, I'm using Angular, and I have a ListComponent (or view) where I have my SimpleBill objects, and when I click on one of those I go to DetailComponent, where I can see that specific Bill. When I go from one view to another I cannot transfer the object SimpleBill, but only its id (or some other field).

Answer 1

No, I agree, inheriting from SimplifiedBill would be conceptually incorrect. In general, I think it as advisable to use inheritance sparingly. I rarely see it used correctly.

Instead, I would recommend a compositional approach: If Bill includes SimplifiedBill, then I think it would make sense to have a data structure Bill that has properties for the details:

let bill = {
  details: {...},
  simplifiedBill: {...}
}

Note here I used a simple object (which - as you are using javascript - might also be worth consideration), but it is equally applicable to a class based approach as well. You might want to think of a different name for the simplified bill though. Maybe something like "summary".

But in general, it is good that you thought of the concept of inheritance that might not quite fit here.