javascript - Typescript, JSON.parse hatası: "Tip 'null', 'string' tipine atanamaz."

Hata burada oluyordu:

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

Mantıklı olan bu cevabı buldum, ancak bu yeniden düzenlemeden sonra hala o hatayı alıyorum:

Hata da söylediği gibi, localStorage.getItem() ya bir string ya da null döndürebilir. JSON.parse() bir string gerektirir, bu yüzden kullanmaya çalışmadan önce localStorage.getItem() sonucunu test etmelisiniz.

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

Önce localStorage moonPortfolio sonuçlarını bir değişkene atıyorum, sonra değişkenin typeof string olup olmadığını kontrol ediyorum. Ama yine de typescript hatasını alıyorum?

Burada herhangi bir düşünce ya da yönlendirme var mı?

Cevap #1

Basit çözüm:

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

Görünüşe göre TS aslında localStorage/sessionStorage'ın iç işleyişlerini biliyor. Ayarlanmamış bir anahtarı almaya çalışırsanız null döner. null boolean olarak değerlendirildiğinde yanlış (falsy) olur, bu yüzden OR ekleyerek boş string hâle getirilmiş JSON nesnesi kullanılacaktır, yani JSON.parse(x) her zaman bir string alacak ve bu da onu tip açısından güvenli hâle getirecektir.

Cevap #2

Derleyici, localStorage.getItem iç işleyişi hakkında çok fazla bilgiye sahip değildir ve dönüş değerinin bir getItem çağrısından diğerine aynı olacağı varsayımını yapmaz. Bu yüzden size yalnızca ikinci getItem çağrısında sonucun null olmadığı konusunda emin olunamayacağını söyler.

Tekrar localStorage üzerinden okumak yerine, halihazırda oluşturduğunuz değişkeni basitçe geçirmeyi deneyin:

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

İlgili makaleler