error TS2322: undefined' is not assignable to type 'Product'

Question

this is my service.ts file where getProductById method belong and gives error.

import { Inject, Injectable } from '@angular/core';
import { inject } from '@angular/core/testing';

@Injectable({
  providedIn: 'root'
})

export class ProductService {

  constructor() { }
  getProducts(): Product[] {
    return products.map(p =>new Product(p.id, p.title, p.price, p.rating, p.description, p.categories));
  }

  getProductById(productId: number): Product{
    return products.find(p => p.id === productId);
  }
}

export class Product{
  constructor(
     public id: number,
     public title: string,
     public price: number,
     public rating: number,
     public description: string,
     public categories: string[]){}
}


export class Review {
  constructor(
    public id: number,
    public productId: number,
    public timestamp: Date,
    public user: string,
    public rating: number,
    public comment: string) {
  }
}


const products =[
  {
    'id': 0,
    'title': 'First product',
    'price': 24.99,
    'rating': 4.3,
    'description': 'This is a short description for product Zeroth',
    'categories': ['electronics', 'hardware']
  },
  
  {
    'id': 1,
    'title': 'Second Product',
    'price': 64.99,
    'rating': 3.5,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['books']
  },

  {
    'id': 2,
    'title': 'Third Product',
    'price': 74.99,
    'rating': 4.2,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['electronics']
  },

  {
    'id': 3,
    'title': 'Fourth Product',
    'price': 84.99,
    'rating': 3.9,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['hardware']
  },

  {
    'id': 4,
    'title': 'Fifth Product',
    'price': 94.99,
    'rating': 5,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['electronics', 'hardware']
  },

  {
    'id': 5,
    'title': 'Sixth Product',
    'price': 54.99,
    'rating': 4.6,
    'description': 'This is a short description. Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': ['books']
  }
]

and this one is product-detail.component where I want to get the details by Id

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { Product, ProductService} from '../shared/product.service';

@Component({
  selector: 'nga-product-detail',
  templateUrl: './product-detail.component.html',
  styleUrls: ['./product-detail.component.css']
})
export class ProductDetailComponent implements OnInit {

  public product!: Product;

  constructor(private route: ActivatedRoute,
    private productService: ProductService) { }

  ngOnInit(): void {
    const prodId: number = parseInt(this.route.snapshot.params['productId']);
    this.product = this.productService.getProductById(prodId);
  }

}

error message:-

Error: src/app/shared/product.service.ts:16:5 - error TS2322: Type '{ id: number; title: string; price: number; rating: number; description: string; categories: string[]; } | undefined' is not assignable to type 'Product'. Type 'undefined' is not assignable to type 'Product'.

16 return products.find(p => p.id === productId);

Trismuto Trismuto · Accepted Answer · 2021-03-11T08:53:50

You have to use the same signature on your getProductById() than Array.find() does, because, if not, you're telling TS that your function should just return Product values, but it can also return undefined as find() does. So, complete your function like:

getProductById(productId: number): Product | undefined {
    return products.find(p => p.id === productId);
  }

or simply remove the return type and let TS infer it:

getProductById(productId: number): {
    return products.find(p => p.id === productId);
  }

error TS2322: undefined' is not assignable to type 'Product'

1 Answers