Typescript，JSON.parse错误：“类型'null'无法分配给类型'string'。”

Question

这里发生了错误：

let moonPortfolio;
...
moonPortfolio = JSON.parse(localStorage.getItem('moonPortfolio'));

我发现this answer是有道理的，但是在此重构之后，我仍然遇到该错误：

  

如错误所述，localStorage.getItem（）可以返回字符串或null。 JSON.parse（）需要一个字符串，因此在尝试使用它之前，您应该测试localStorage.getItem（）的结果。

if (portfolio.length === 0) {
  const storedPortfolio = localStorage.getItem('moonPortfolio');

  if (typeof storedPortfolio === 'string') {
    moonPortfolio = JSON.parse(localStorage.getItem('moonPortfolio'));
  }
  else {
    moonPortfolio = [];
  }

  if (moonPortfolio) {
    const savedPortfolio = Object.values(moonPortfolio);
    this.props.fetchAllAssets();
    // this.props.addCoins(savedPortfolio);
  }
}

我首先将localStorage moonPortfolio的结果设置为var，然后检查var是否为typeof字符串。还能得到打字稿错误吗？

这里有什么想法或方向吗？

Answer 1

编译器对localStorage.getItem的内部工作了解不多，也没有假设从一次调用getItem到下一次调用的返回值是相同的。因此，它只是告诉您，无法确定在第二次调用getItem时结果不是 null。

尝试简单地传入已创建的变量，而不是再次从localStorage中读取：

if (typeof storedPortfolio === 'string') {
  moonPortfolio = JSON.parse(storedPortfolio);
}

Answer 2

TypeScript不知道具有相同字符串文字的localStorage.getItem的多次调用将总是返回相同的值（实际上，这甚至都不是真的）。​​

第二次致电localStorage.getItem('moonPortfolio')可能会返回null-您应该致电JSON.parse(storedPortfolio)而不是再次致电getItem。

Answer 3

简单修复：

f2.log

似乎TS确实知道了localStorage / sessionStorage的内部工作原理。如果您尝试获取未设置的密钥，它将返回JSON.parse(localStorage.getItem('moonPortfolio') || '{}'); 。 null被当作null处理时是虚假的，因此通过添加OR将使用空的字符串化json对象代替，这意味着boolean将始终被赋予一个字符串，这意味着可以安全输入。

Answer 4

要知道的主要事情是 localStorage.getItem() 返回字符串 |无效的。知道我们可以用更简单的模式重写代码：

  const portfolio = []; //Just to make the code samples valid
  if (portfolio.length === 0) {
    let moonPortfolio = []; //Default value
    const storedText = localStorage.getItem('moonPortfolio');
    if (storedText !== null) { //We know it's a string then!
      moonPortfolio = JSON.parse(storedText);
    }
    //The if statement here is not needed as JSON.parse can only return 
    //object | array | null or throw. null is the only falsy value and that 
    //can only happen if storedText is null but we've already disallowed 
    //that.
    //if (moonPortfolio) {
      const savedPortfolio = Object.values(moonPortfolio);
      //Do whatever else is needed...
    //}
  }