I'm trying to create an cart for an Angular project. I want to declare product as a Product but I am running into an error: (Error message shown on: "(product: Product) => { ..."

No overload matches this call. Overload 1 of 5, '(observer?: PartialObserver | undefined): Subscription', gave the following error. Argument of type '(product: Product) => void' is not assignable to parameter of type 'PartialObserver | undefined'. Property 'complete' is missing in type '(product: Product) => void' but required in type 'CompletionObserver'. Overload 2 of 5, '(next?: ((value: unknown) => void) | undefined, error?: ((error: any) => void) | undefined, complete?: (() => void) | undefined): Subscription', gave the following error. Argument of type '(product: Product) => void' is not assignable to parameter of type '(value: unknown) => void'. Types of parameters 'product' and 'value' are incompatible. Type 'unknown' is not assignable to type 'Product'.ts(2769)

My cart.components.ts:

ngOnInit() {

this.message.getMessage().subscribe((product: Product) => {

  this.cartItems.push({
    id: 1,
    productName: "string",
    qty: 1,
    price: 1
  })

  this.cartItems.forEach(item => {
    this.cartTotal += (item.qty * item.price)
  })
})

}

I want to push the product selected from the array(when clicking add to cart on the menu page). So instead of having "id: 1, productName: "string"...", I'd have productName: product.name and productPrice: product.price ... This is my product.services.ts:

    export class ProductService {
  
  products: Product[] = [
    new Product(1, 'Product 1', 'P1 description', 100, 'image1.png'),
    new Product(2, 'Product 2', 'P2 description', 300, 'image2.jpg'),
    new Product(3, 'Product 3', 'P3 description', 50, 'image3.png'),
    new Product(4, 'Product 4', 'P4 description', 20, 'image4.jpg'),
    new Product(5, 'Product 5', 'P5 description', 400, 'image5.jpg'),
    new Product(6, 'Product 6', 'P6 description', 40, 'image6.jpg'),
  ]

  constructor() { }

  getProducts(): Product[] {
    return this.products
  }

}

And my cart-item.components.ts:

export class CartItemComponent implements OnInit {

  @Input() cartItem: any

  constructor() { }

  ngOnInit() {
  }

}

Messenger Service:

    export class MessengerService {    
subject = new Subject()    
constructor() { }    
sendMessage(product: Product) {     
this.subject.next(product)   
}    
getMessage() {     
return this.subject.asObservable()   
} 
}