“null”类型不能分配给“string”类型答案

【问题标题】：Type 'null' is not assignable to type 'string'“null”类型不能分配给“string”类型
【发布时间】：2022-01-27 05:08:29
【问题描述】：

遇到错误

类型'null'不能分配给类型'string'

在

this.localItem = localStorage.getItem("todos");

尝试使用解决时

this.localItem = JSON.parse(localStorage.getItem("todos") || '{}');

网页的整个组件变得空白。这是为了准备一个待办事项列表和自动添加待办事项以及通过添加到本地存储来删除待办事项。

    import { Component, OnInit } from '@angular/core';
    import { Todo } from 'src/app/Todo';
    
    @Component({
      selector: 'app-todos',
      templateUrl: './todos.component.html',
      styleUrls: ['./todos.component.css']
    })
    export class TodosComponent implements OnInit {
      localItem: string;
      todos:Todo[];
        constructor() {
        this.localItem = localStorage.getItem("todos");
        if(this.localItem == null){
          this.todos = [];
        }
        else{
          this.todos = JSON.parse(this.localItem);
        }
        this.todos =[]
      }
    
      ngOnInit(): void {
      }
      deleteTodo(todo:Todo){
        console.log(todo)
        const index = this.todos.indexOf(todo);
        this.todos.splice(index,1)
        localStorage.setItem("todos", JSON.stringify(this.todos));
      }
      addTodo(todo:Todo){
        console.log(todo);
        this.todos.push(todo);
        localStorage.setItem("todos", JSON.stringify(this.todos));
      }
    }
    ```

【问题讨论】：

当this.todos 显然应该是一个数组（this.todos = []）时，为什么要使用空对象作为“默认”对象？
“出现上述错误” - 您是否搜索过错误？你了解它的来源吗？
看看这是否有帮助 -> stackoverflow.com/questions/67700374/…

标签： json angular typescript error-handling

【解决方案1】：

由于您将本地存储值分配给 todos[] 中的对象，它可能会返回数组对象，因此请在解析数组对象时尝试 []。

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

【讨论】：