Angular新手求助：如何解决TS(2322)类型不兼容错误？

错误原因 #

localStorage.getItem()的返回值类型是string | null（找不到对应key时返回null），但你将其赋值给了声明为string类型的localItem变量，TypeScript的类型检查不允许这种可能为null的值直接赋值给非可选的字符串类型变量，因此抛出TS(2322)错误。

解决方案 #

1. 修正变量类型声明

将localItem的类型改为string | null，让它能接受字符串或null值：

localItem: string | null;

2. 修复JSON.parse的参数错误

你代码中JSON.parse("localItem")是错误写法，应该传入变量this.localItem而非字符串字面量"localItem"，结合前面的null判断，此时this.localItem必然是字符串类型，可以安全解析。

修正后的完整代码 #

export class TodosComponent implements OnInit{
  todos!: Todo[]; 
  localItem: string | null;
  constructor(){
    const item = localStorage.getItem("todos");
    this.localItem = item;
    if(this.localItem == null){
      this.todos = [];
    }
    else{
      console.log(this.todos);
      this.todos = JSON.parse(this.localItem);
    }
  }
}

优化方案（简化代码） #

其实可以不用额外的localItem变量，直接处理item即可，减少冗余：

export class TodosComponent implements OnInit{
  todos!: Todo[]; 
  constructor(){
    const item = localStorage.getItem("todos");
    this.todos = item ? JSON.parse(item) : [];
  }
}

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