Angular升级后报Type 'Script | undefined'不能赋值给Script类型错误怎么解决

问题原因 #

这个报错是因为你的ScriptService中scriptById方法的返回值类型被定义为Script | undefined，但你声明的this.script类型是必填的Script，不允许接收undefined值，严格类型校验下就触发了TS2322错误。
你升级Angular版本后默认启用了严格类型检查模式，所以之前Angular11下没有暴露的类型问题现在会被编译器抛出。

解决方法 #

你可以根据实际业务场景选以下任意一种方案：

方案1：确定对应id的Script一定存在 #

直接对返回值加非空断言即可，告诉TypeScript你可以保证这个返回值不会为undefined：

this.script = this.service.scriptById(id)!;

方案2：存在找不到Script的可能，加兜底逻辑 #

先判断返回值是否存在，存在再赋值，不存在走异常处理逻辑：

this.service.scripts.subscribe(scripts => {
  const targetScript = this.service.scriptById(id);
  if (targetScript) {
    this.script = targetScript;
  } else {
    // 示例兜底逻辑：跳转到404页面
    this.router.navigate(['/404']);
    // 也可以赋值默认的Script对象
    // this.script = { /* 你的默认属性 */ } as Script
  }
})

方案3：调整属性类型定义允许为空 #

把script的类型改成允许undefined，后续用到这个属性的地方配合可选链?.做判断即可：

// 修改属性声明
script: Script | undefined;

// 后续使用示例
// const scriptName = this.script?.name;

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