错误 TS2322:undefined' 不可分配给类型 'Product'

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

这是我的 service.ts 文件,其中包含 getProductById 方法并给出错误。

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']
  }
]

这个是 product-detail.component,我想通过 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);
  }

}

错误信息:-

错误:src/app/shared/product.service.ts:16:5 - 错误 TS2322:类型 '{ id: number;标题:字符串;价格:数量;评级:数字;描述:字符串;类别:字符串[]; } | undefined' 不可分配给类型 'Product'。 类型 'undefined' 不可分配给类型 'Product'.

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

您必须在 getProductById() 上使用与 Array.find() 相同的签名,因为如果不是,您就是在告诉 TS 您的函数应该 return Product 值,但它也可以像 find() 那样 return undefined。所以,像这样完成你的功能:

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

或者简单地删除 return 类型并让 TS 推断它:

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