TypeScript4.3下Observable<ProductResolved>类型不匹配报错解决

1. TypeScript 4.3版本的规则变更原因 #

你遇到的报错确实是版本升级后校验规则收紧导致的：

• TypeScript 4.3版本强化了strictNullChecks编译选项的校验逻辑，同时新版Angular创建项目时默认开启strict系列编译配置（包含strictNullChecks）。在该规则下，null和undefined不能赋值给没有显式声明兼容这两个类型的变量/字段。
• 你定义的ProductResolved接口中，product字段的类型仅声明为IProduct，没有显式标注允许为null，3.5版本的宽松校验可以兼容这种写法，4.3版本的严格校验就会抛出类型不匹配的错误。

2. 新版TypeScript下的最佳实践 #

推荐按优先级选择以下方案：

• 优先方案：调整接口定义匹配实际业务逻辑
  你的场景中解析失败时确实会返回空的product，直接修改ProductResolved接口的product字段类型即可，符合类型定义要贴合实际运行值的规范：

export interface ProductResolved {
 product: IProduct | null; // 显式声明允许为null
 error?: any;
}

• 临时兼容方案：使用类型断言绕过校验
  如果暂时不能修改接口定义，可以用类型断言强制告诉TS你确认该值符合类型要求，不推荐长期使用，会失去类型校验能力：

return of({product : null,error:message} as ProductResolved);

• 可选业务优化方案：解析失败直接跳转错误页
  如果不需要把错误信息传递到目标组件，可以在Resolver中检测到异常后直接调用Router跳转404/参数错误页，不需要返回空product对象。

额外优化提示：你当前的id判断逻辑isNaN(+!id)存在错误，!id会先把id转为布尔值再转数字，判断逻辑不符合预期，建议修改为if (id === null || isNaN(+id))。

内容的提问来源于stack exchange，提问作者Harish Shisode