I have the following IProduct and ProductResolved interfaces
export interface IProduct {
id: number;
productName: string;
productCode: string;
category: string;
tags?: string[];
releaseDate: string;
price: number;
description: string;
starRating: number;
imageUrl: string;
}
export interface ProductResolved {
product: IProduct;
error?: any;
}
I am attempting to use them in ProductResolver as shown below
import { Injectable } from "@angular/core";
import { ActivatedRouteSnapshot, Resolve, RouterStateSnapshot } from "@angular/router";
import { Observable, of } from "rxjs";
import { ProductResolved } from "./product";
import { ProductService } from "./product.service";
@Injectable({
providedIn: 'root'
})
export class ProductResolver implements Resolve<ProductResolved> {
constructor(private productService: ProductService) { }
resolve(route: ActivatedRouteSnapshot, state: RouterStateSnapshot):Observable<ProductResolved> {
const id = route.paramMap.get('id');
if (isNaN(+!id)) {
const message = `Product id was not a number: ${id}`;
console.error(message);
return of({product : null,error:message}); //error here
}
return of(); //just for example i have return of() here I will change it later
}
}
when I return (in the code above)
return of({product : null,error:message}); //error here
an error is thrown stating
Type 'Observable<{ product: null; error: string; }>' is not assignable to type 'Observable'. Type '{ product: null; error: string; }' is not assignable to type 'ProductResolved'. Types of property 'product' are incompatible. Type 'null' is not assignable to type 'IProduct'.ts(2322)
Note :- the above code appears to work in typescript version "~3.5.3" but encounters an issue in typescript version "~4.3.2"
Question :-
- Are there any changes in the latest typescript version("~4.3.2") related to the code above?
- What are the best practices to handle the scenario mentioned above according to the new typescript standard? (if there are any relevant changes)