Typescript 错误类型 'null' 不可分配给类型

Question

在我的项目中，我使用 Angular LocalStorage 来存储文件名类型的记录值。我在 back 方法

中遇到错误

错误

Type 'string | null' is not assignable to type 'FileName | undefined'.
  Type 'null' is not assignable to type 'FileName | undefined'.

我需要帮助解决这个错误，下面是我的代码

代码


export interface FileName {
    fname: number;
    sname: number;
    Tange: number;
    quick: string;
    Mark: string;
    mine: number;
}

currentName: FileName | undefined = undefined;
previousName: FileName | undefined = undefined;

data(rec: FileName, Mark: HTMLTableDataCellElement) {
  const { fname, sname, Tange, record_id, mine } = rec;
  const quick = Mark.innerText;
  this.name.replaceAndNew({sname, Tange, record_id, quick, mine, fname}).subscribe(data => {
    this.process(data);
  })
   localStorage.setItem('FileName', JSON.stringify(rec));
}

back(){
  localStorage.getItem('FileName');
  this.currentName =  localStorage.getItem('FileName'); -----------------> Error

}

Answer 1

您需要使用 JSON.parse

将其解析回对象

this.currentName =  JSON.parse(localStorage.getItem('FileName'));

Answer 2

fortunee 是正确的，但是由于 localStorage 中的所有内容都存储为字符串，Typescript 无法保证对象仍然是同一个对象。在这种情况下，您需要通过强制转换告诉 Typescript 解析对象的类型。

this.currentName =  JSON.parse(localStorage.getItem('FileName') || '{}') as FileName;

之后您可能想要回避类型以确保 this.currentName 不是一个空对象（如果用户清除了他们的 localStorage 就可能发生这种情况）。

示例：

if (this.currentName.fname == null) {
  // Give the user an error message or something...
  this.currentName = undefined;
}

Answer 3

我运行遇到同样的错误并通过以下方式修复它：

const currentName =  String(localStorage.getItem('FileName') || '');

Answer 4

如果在解析对象时出现错误，您可以使用 try-catch 为其设置默认值

try {
  this.currentName =  JSON.parse(localStorage.getItem('FileName')) as FileName;
} catch(e){
  this.currentName = {}
}

Typescript 错误类型 'null' 不可分配给类型

Typescript Error Type 'null' is not assignable to type

javascript

null

local-storage

typescript

angular