Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular Object literal may only specify know properties and ... does not exist in type

Tags:

angular

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?

like image 904
Kuiken Avatar asked Apr 28 '17 08:04

Kuiken


People also ask

Does not exist on type?

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.

Is missing the following properties from type?

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.

What is object literal in Javascript?

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 = {

How do I fix object is possibly undefined typescript?

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.


Video Answer


1 Answers

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

like image 124
Kuiken Avatar answered Oct 16 '22 15:10

Kuiken