Angular中TypeScript报null/undefined无法赋值给string的类型错误

触发的编译报错详情 #

• 第一类类型不兼容：string | null 类型无法赋值给 string 类型，触发原因为null值不满足纯string类型的赋值约束。
• 第二类类型不兼容：结构为{ id?: string | undefined; title?: string | undefined; content?: string | undefined; }的对象无法赋值给自定义Post接口，具体为对象内的id字段是string | undefined类型，和Post接口要求的纯必填string类型不匹配，undefined值不满足赋值要求。

报错对应的业务逻辑背景 #

• 自定义Post接口的原始定义：要求id、title、content三个字段均为必填的纯string类型。
• PostCreateComponent组件的现有实现：
  • 引入了Component、OnInit、NgForm、ActivatedRoute、ParamMap、Post、PostsService依赖，组件内定义了mode、postId、post三个属性。
  • 在ngOnInit生命周期中订阅路由参数：如果路由存在postId参数，就将组件切换为编辑模式，直接把paramMap.get('postId')的返回值赋值给postId，再调用PostsService的getPost方法拉取对应帖子数据；如果不存在postId参数，就将组件切换为创建模式，给postId赋值字符串"null"。
  • 组件实现了onAddPost方法，接收NgForm的表单提交结果完成内容发布。

合规的代码调整方案 #

1. 解决string | null赋值给纯string的报错
   • 明确ParamMap.get()方法的返回值类型天然是string | null，当路由中不存在对应参数时方法会返回null，因此不能直接把返回值赋值给声明为纯string类型的postId属性。
   • 调整方式：
     • 在订阅路由参数时增加非空判断逻辑，只有当参数值存在时才将其赋值给postId：

       ngOnInit() {
         this.route.paramMap.subscribe((params: ParamMap) => {
           const targetPostId = params.get('postId');
           // 非空校验通过后再走编辑逻辑
           if (targetPostId) {
             this.mode = 'edit';
             this.postId = targetPostId;
             this.post = this.postsService.getPost(this.postId);
           } else {
             this.mode = 'create';
             this.postId = 'null';
           }
         })
       }
       

     • 也可以直接调整postId的属性类型声明为string | null，适配路由方法的返回值类型，避免隐式类型不匹配。
2. 解决可选属性对象赋值给必填Post接口的报错
   • 两种适配方向可根据业务场景选择：
     • 如果创建新帖子的场景下确实没有提前生成id值，可以调整Post接口的定义，将id标记为可选属性，兼容未赋值的场景：

       interface Post {
         id?: string; // 从必填调整为可选，匹配创建场景的空值状态
         title: string;
         content: string;
       }
       

     • 如果必须保持Post接口全字段必填的约束，就需要在给post属性赋值时，对所有可能为undefined的字段做兜底处理：为缺失的id字段补充临时占位的string值，保证传入对象的所有字段都是符合要求的纯string类型，不存在undefined或null值。
   • 避免直接把可选结构的响应数据未经校验就赋值给Post类型变量，要逐字段完成类型校验后再赋值。

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