打字稿错误类型'null'不可分配给类型答案

【问题标题】：Typescript Error Type 'null' is not assignable to type打字稿错误类型'null'不可分配给类型
【发布时间】：2021-06-17 04:21:31
【问题描述】：

在我的项目中，我使用 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

}

【问题讨论】：

很简单，您的属性this.currentName 是一种名为FileName 的interface，但您正在检索localStorage.getItem('FileName');，它将返回一个类型DOMString ，要解决您的问题，您必须将代码解析为像这样的对象 JSON.parse(localStorage.getItem('FileName') 然后将 currentName: Filename 更改为 currentName: any
不要将类型更改为任何类型，这是个坏建议。改用类型转换。这样，只有 localStorage 提取可能会中断，而访问 currentName 的整个程序的其余部分仍然是类型安全的。

标签： javascript angular typescript null local-storage

【解决方案1】：

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;
}

【讨论】：

为什么 TS 不能根据值推断类型？你真的要投吗？
因为 Typescript 是一种编译时语言，而不是运行时语言。您实际上是在运行 Javascript，而不是 Typescript，并且只有 Javascript 可以处理本地存储。
添加JSON.parse(localStorage.getItem('FileName')) as FileName ;后我得到Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'.
我编辑了。这将修复您的类型错误，但为了安全起见，您确实应该在代码中进行一些鸭子类型验证。
酷！好答案！

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

你需要用JSON.parse将它解析回一个对象

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

【讨论】：

我收到Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. 错误

【解决方案4】：

我遇到了同样的错误，只是通过以下方式修复了它：

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

【讨论】：

当时我还没有这个特权。由于我的回答提供了一个可行的解决方案，即使是简短的，这些信息似乎更有价值，然后是评论。感谢您的信息。顺便说一句，您的评论似乎也不符合评论规则。
嗨。我意识到你没有，现在有特权。我意识到这篇文章实际上是一个可以接受的答案。我只是想评论一下“我故意违反已知规则”方面，在清理之后，确信在这种情况下它不适用。我会对我的评论违反规则的方式感兴趣，请告诉我。在严重的情况下，您当然可以举报我的评论。