TypeScript 4.6.4 表明此代码无效

Question

如何解决此 Typescript 问题？

const userData: {
      email: string;
      id: string;
      _token: string;
      _tokenExpirationDate: string;
    } = JSON.parse(localStorage.getItem('userData'));

来自控制台的消息

错误：src/app/auth/authservice.ts:56:20 - 错误 TS2345：类型为“string |”的参数null' 不能分配给'string' 类型的参数。
类型“null”不可分配给类型“string”。

我添加了 // @ts-ignore 但 WebStorm 抱怨有错误。

Answer 1

让我们忽略

JSON.parse()

的调用签名声明返回不安全的

any

类型这一事实。我假设如果

JSON.parse()

返回

null

以外的任何内容，它将是您期望的对象类型的值。

---

localStorage.getItem("userData")

有可能是

null

，TypeScript认为调用

JSON.parse(null)

是一个错误，因为通常

JSON.parse()

的目的是解析编码JSON值的字符串。因此，解析

null

是一个类型错误，即使 JavaScript 不会出现运行时错误。请参阅 “所有合法的 JavaScript 都是合法的 TypeScript”是什么意思？ 了解更多信息。

如果您尝试修复它以使其更加类型安全，则应确保仅传递

string

。也许是这样的：

const retrievedValue = localStorage.getItem('userData');
const userData = retrievedValue ? JSON.parse(retrievedValue) as {
  email: string;
  id: string;
  _token: string;
  _tokenExpirationDate: string;
} : null;

编译不会出现错误，现在

userData

具有类型

{email: string ... } | null

，其中 union 与

null

类型反映

userData

可能是一个有效对象或

null

。

---

如果你想方便一点，但安全性稍差，你可以对编译器撒谎，告诉编译器本地存储结果，并使用非空断言运算符（null）

断言

它不是

!

:

const userData: {
  email: string;
  id: string;
  _token: string;
  _tokenExpirationDate: string;
} | null = JSON.parse(localStorage.getItem('userData')!);

请注意，我在那里手动添加了

| null

，因为编译器再也看不到这种可能性了。

Playground 代码链接

Answer 2

在我看来，解决问题的最简单方法就是这样做：

const userData: {
  email: string;
  id: string;
  _token: string;
  _tokenExpirationDate: string;
} = JSON.parse(localStorage.getItem('userData') ?? "null");

注意nullish合并运算符（

??

）需要打字稿3.7

---

现在，如果您希望类型反映为 null 的可能性（如果 localStorage 不包含

'userData'

），那么您可能希望使用带有

null

:

的联合类型

const userData: {
  email: string;
  id: string;
  _token: string;
  _tokenExpirationDate: string;
} | null = JSON.parse(localStorage.getItem('userData') ?? "null");

此时，您不妨将

userData

类型提取到接口中：

interface UserData {
  email: string;
  id: string;
  _token: string;
  _tokenExpirationDate: string;
}

const userData: UserData | null = JSON.parse(localStorage.getItem('userData') ?? "null");

Answer 3

如果 localstorage 没有赋值，我们可以直接赋值空字符串

var userData = JSON.parse(localStorage.getItem('userData') ?? '');