IT技术 - 将 localStorage.getItem() 与typescript一起使用 - 吾爱随笔录

IT技术 reactjs typescript local-storage

2021-05-19 02:28:32

我有以下代码行：

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'.

所以我尝试包含非空断言运算符 (!)：

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

然后给了我一个不同的警告：

Forbidden non-null assertion.

我是typescript的新手。它在这里寻找什么？

2个回答

JSON.parse依赖类型必须是string.

但local storage返回类型string|null，因此它可以既string和null，当你申报的数据，它的值是零，直到您呈现组件（或调用函数），然后调用getItem函数，它得到的值，那么它是一个string。

您可以使用||operation 并向其添加一个字符串，使其不再为空。

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

也可以添加// @ts-ignore防止TypeScript检查下一行的类型，但不推荐

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

JSON.parse期望string作为第一个参数

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

当localStorage回报string | null。

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

如果你想让 TS 开心，就检查一下是否value有问题

const value = localStorage.getItem("teeMeasuresAverages")

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

}

其它你可能感兴趣的问题