I'm starting out with Angular and running into an error.
.../mocks.ts(9,4): Type '{"id": number; "name": string; "description": string; "inStock": number; "price": number; "featu...' is not assignable to type 'CarPart[]. Object literal may only specify known properties, and '"featured"' does not exist in type 'CarPart'.
My code:
car-part.ts
export class CarPart {
id: number;
name: string;
description: string;
inStock: number;
price: number;
featured: boolean;
}
mock.ts
import { CarPart } from './car-part';
export const CARPARTS: CarPart[] = [{
"id": 1,
"name": "Super Tires",
"description": "These tires are the very best",
"inStock": 5,
"price": 299.99,
"featured": false //Line 9
},
{
"id": 2,
"name": "Reinforced Shocks",
"description": "Shocks made of kryptonite",
"inStock": 4,
"price": 500.50,
"featured": false
},
{
"id": 3,
"name": "Padded Seats",
"description": "Super soft seats for a smooth ride",
"inStock": 0,
"price": 333.33,
"featured": true
}];
car-parts.component.ts
import { Component, OnInit } from '@angular/core';
import { CarPart } from './car-part';
import { CARPARTS } from './mock';
@Component({
selector: 'car-parts',
templateUrl: './car-parts.component.html',
styleUrls: ['./car-parts.component.css']
})
export class CarPartsComponent implements OnInit {
constructor() { }
carParts: CarPart[];
totalCarParts(){
let sum = 0;
for(let carPart of this.carParts){
sum += carPart.inStock;
}
return sum;
}
ngOnInit() {
this.carParts = CARPARTS;
}
}
when I remove "featured" from both mock.ts and car-part.ts it is fine, no error. If I add it or any other name or type, it wont work... Can someone explain this?
The "Property does not exist on type '{}'" error occurs when we try to access or set a property that is not contained in the object's type. To solve the error, type the object properties explicitly or use a type with variable key names.
The error "Type is missing the following properties from type" occurs when the type we assign to a variable is missing some of the properties the actual type of the variable expects. To solve the error, make sure to specify all of the required properties on the object.
In plain English, an object literal is a comma-separated list of name-value pairs inside of curly braces. Those values can be properties and functions. Here's a snippet of an object literal with one property and one function. var greeting = {
The "Object is possibly 'undefined'" error occurs when we try to access a property on an object that may have a value of undefined . To solve the error, use the optional chaining operator or a type guard to make sure the reference is not undefined before accessing properties.
I restarted the Angular CLI server (Ctrl+C > ng serve). Compiled without problems...
Evidence that "Have you tried turning it off and on again" is still relevant. Thanks for the time looking at the problems Tim and Max
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With