reactjs 对类型脚本使用localStorage.getItem()

rqcrx0a6  于 2023-02-04  发布在  React
关注(0)|答案(5)|浏览(217)

下面是一段代码:

const allGarments = teeMeasuresAverages || JSON.parse(localStorage.getItem("teeMeasuresAverages")) || teeMeasuresAveragesLocal;

Typescript抛出此警告:

Argument of type 'string | null' is not assignable to parameter of type 'string'.
  Type 'null' is not assignable to type 'string'.

所以我尝试包含非空Assert操作符(!):

const allGarments = teeMeasuresAverages || JSON.parse(localStorage.getItem("teeMeasuresAverages")) || teeMeasuresAveragesLocal;

这给了我一个不同的警告:

Forbidden non-null assertion.

我是打字新手。它在这里找什么?

yebdmbv4

yebdmbv41#

JSON.parse依赖项的类型必须是string
但是local storage的返回类型是string|null,所以它可以是stringnull,当你声明数据时,它的值是null,直到你呈现组件(或调用函数),然后调用getItem函数,它得到值,然后它是string
您可以使用||运算符并向其添加一个字符串,使其不再为空。

JSON.parse(localStorage.getItem("teeMeasuresAverages") || "")

您还可以添加// @ts-ignore以防止TypeScript检查下一行中的类型,但不建议这样做

// @ts-ignore
JSON.parse(localStorage.getItem("teeMeasuresAverages"))//just the usual way
dgenwo3n

dgenwo3n2#

JSON.parse需要string作为第一个参数

JSON.parse(text: string, reviver?: ((this: any, key: string, value: any) => any) | undefined): any

localStorage返回时。

const value = localStorage.getItem("teeMeasuresAverages") // string | null

如果你想让TS高兴,只要检查value是否是一个stirng

const value = localStorage.getItem("teeMeasuresAverages")

if (typeof value === 'string') {
    const parse = JSON.parse(value) // ok

}
irtuqstp

irtuqstp3#

因此,在给定的解决方案中,有一个错误是无法解析空字符串。对于JSON.parse(""),它会给你一个错误Uncaught SyntaxError: Unexpected end of JSON input
所以我的解决方案是使用||部分来给予一个默认值,如果你在本地存储中找不到你要找的变量,你会希望发生什么。

JSON.parse(localStorage.getItem("isItTrueOrFalse") || "false")
euoag5mw

euoag5mw4#

JS有时很时髦--有人可能会认为这很好用:

const item = localStorage.getItem(itemName)
  const result = item ? JSON.parse(item) : undefined

棘手的部分-在某些情况下(我不知道为什么),它可能会返回给你'undefined'类型string(而不是“真实的的”undefined,这是类型undefined,因此作为非空字符串被评估为true。一个正确的方法如何在Typescript中做到这一点:

const item = localStorage.getItem(itemName)
  const result = item && item !== 'undefined' ? JSON.parse(item) : undefined

从localStorage获取内容的模块化函数如下所示:

export const getItemFromLocalStorage = (itemName: string) => {
  if (ISSERVER) return
  const item = localStorage.getItem(itemName)
  return item && item !== 'undefined' ? JSON.parse(item) : undefined
}
rdrgkggo

rdrgkggo5#

我发现这似乎对我使用 typescript 很有帮助:

JSON.parse(`${localStorage.getItem('localStorage-value')}`);

相关问题