I have a pair of interfaces:
meal-component.ts:
export interface MealComponent {
componentId: string;
componentQuantity: number;
}
meal.ts:
import { MealComponent } from 'src/app/interfaces/meal-component';
export interface Meal {
name: string;
components: MealComponent[];
totalCost: number;
}
Working within Angular, in my meal component I am attempting to create a new Meal:
meals.component.ts:
import { Component } from '@angular/core';
import { Meal } from 'src/app/interfaces/meal';
// other imports
@Component({
selector: 'app-meals',
templateUrl: './meals.component.html',
styleUrls: ['./meals.component.css']
})
export class MealsComponent {
// other elements
myMeal: Meal = {
name: "myTestMeal",
components: [
{
componentId: "sdfhsd6786sdf",
componentQuantity: 5,
},
{
componentId: "jhk87sjk98shj",
componentQuantity: 7,
},
],
totalCost: 3872,
};
// other elements
}
myMeal triggers the error:
Type '{ name: string; components: { componentId: string; componentQuantity: number; }[]; totalCost: number; }' is missing the following properties from type 'Meal': componentId, componentQuantity ts(2739)
I'm confused, how are the properties componentId and componentQuantity missing? What could be the issue here?
It's possible that there might be something simple that I'm overlooking, so any assistance is appreciated.
Solution:
Remove the extends statement in meal.ts. The Meal extending MealComponent implies it needs to contain all the properties of MealComponent.