I have two interfaces:

dish-component.ts:

    export interface DishComponent {
    componentId: string;
    componentQuantity: number;
}

dish.ts:

import { DishComponent } from 'src/app/interfaces/dish-component';

export interface Dish extends DishComponent {
    name: string;
    components: DishComponent[];
    totalCost: number;
}

I’m using Angular, in my component for dishes I try to create a Dish:

dishes.component.ts:

import { Component } from '@angular/core';
import { Dish } from 'src/app/interfaces/dish';
// other imports

@Component({
  selector: 'app-dishes',
  templateUrl: './dishes.component.html',
  styleUrls: ['./dishes.component.css']
})

export class DishesComponent {

  // other stuff

  myDish: Dish = {
    name: "myTestDish",
    components: [
      {
        componentId: "sdfsdf76sdf76",
        componentQuantity: 4,
      },

      {
        componentId: "dfh097fgj46j",
        componentQuantity: 4,
      },
    ],
    totalCost: 2354,
  };

  // other stuff
}

myDish yields the error:

Type ‘{ name: string; components: { componentId: string; componentQuantity: number; }[]; totalCost: number; }’ is missing the following properties from type ‘Dish’: componentId, componentQuantity ts(2739)

I don’t understand, how is the properties componentId and componentQuantity missing? What am I doing wrong?

Probably something obvious I’m missing, but I’m glad if you can point it out.

Solution:

Remove the extends in dish.ts. The Dish extends DishComponent imply it needs to have all the properties DishComponent has.

>Solution :

If you remove the extends class u will see this is working as expected. Indeed DishComponent requires cmpId and cmpQt but u do not set it. U need or to specify or to remove which I assume will be the solution.

Extends is a keywoard that "copy" the following interface properties.