Typescript、JSON.parse 錯誤：“類型 'null' 不可分配給類型 'string'。”

Question

錯誤發生在這里：

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

我發現這個答案很有意義，但是在這個重構之后我仍然遇到這個錯誤：

正如錯誤所說，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字符串。 仍然收到 typescript 錯誤？

這里有什么想法或方向嗎？

Answer 1

編譯器不太了解localStorage.getItem的內部工作原理，並且不會假設從getItem一次調用到下一次調用的返回值將相同。 所以它只是告訴你不能確定在第二次調用getItem結果不是null 。

嘗試簡單地傳入您已經創建的變量，而不是再次從localStorage讀取：

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

Answer 2

簡單的修復：

JSON.parse(localStorage.getItem('moonPortfolio') || '{}');

似乎 TS 確實了解 localStorage/sessionStorage 的內部工作原理。 如果您嘗試獲取未設置的鍵，它將返回null 。 null當被視為boolean是假的，因此通過添加 OR 將使用空的字符串化 json 對象，這意味着JSON.parse(x)將始終被賦予一個字符串，這意味着它是類型安全的。

Answer 3

TypeScript 不知道具有相同字符串文字的localStorage.getItem多次調用將始終返回相同的值（事實上，這甚至不是真的）。

第二次調用localStorage.getItem('moonPortfolio')可能會返回null - 您應該調用JSON.parse(storedPortfolio)而不是再次調用getItem 。

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...
    //}
  }

Answer 5

也在反應：

JSON.parse(localStorage.getItem("data") ?? '{}')

或者

JSON.parse(localStorage.getItem("data") || '{}')