类型随时间变化的变量的类型注释[重复]

Question

我已将字符串化对象存储到打字稿项目中的本地存储中。

当我试图获取 localStorage 数据时，它不能使用类型注释“字符串”

let str : string = localStorage.getItem("userDetails");

let UserData = JSON.parse(str);

上面的代码在第 1 行给了我以下错误： 错误：键入“字符串 | null' 不可分配给类型 'string'。 类型 'null' 不可分配给类型 'string'.ts(2322)

它正在使用类型注释“any”。

let str: any = localStorage.getItem("userDetails");

let UserData = JSON.parse(str);

但根据要求，不应使用“任何”。

编辑 :: 这不起作用，即使对于

let UserData = JSON.parse(localStorage.getItem("userDetails")||"{}");

作为一个新问题提出。

Answer 1

您的错误意味着获取的数据可以为空；

最简单的解决方案：

let str : string | null = localStorage.getItem("userDetails");

替代方案：

let str : string = localStorage.getItem("userDetails") && localStorage.getItem("userDetails");

或者：

const item = localStorage.getItem("userDetails");
let str : string = '';
  if (item) {
  str = item;
}

Answer 2

localStorage.getItem('userDetails') 可以返回字符串或空值。当 localStorage (string) 中存在 userDetails' 对象时返回字符串，如果不存在则返回 null。所以你从方法中得到的类型是string | null。

现在你需要让 TypeScript 确定 str 的类型是字符串。 TS 很聪明，会检测您是否检查了类型，例如。在 if 之前

// TS will set the type of str automatically to string | null,
// because that's the return type of localStorage.getItem()
let str = localStorage.getItem("userDetails");

if(typeof str === 'string') {
  let UserData = JSON.parse(str);
  //rest of your UserData related logic here
}

你也可以这样做

let str : string = localStorage.getItem("userDetails") || '{}'，那么如果localStorage返回null，str会解析成一个字符串化的对象，然后你就可以处理let userData的值中的错误行为了。