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' 不能分配给“字符串”类型的参数。
类型“null”不能分配给类型“string”。

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

Answer 1

让我们忽略JSON.parse()的调用签名声明返回不安全的any类型这一事实。 我只是假设如果JSON.parse()返回null以外的任何值，它将是您预期的 object 类型的值。

---

It's possible that localStorage.getItem("userData") might be null , and TypeScript thinks that it's a mistake to call JSON.parse(null) , since generally the point of JSON.parse() is to parse strings that encode JSON values. 因此，解析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 {email: string... } | null ，其中与null类型的联合反映了userData可能是有效的 object 或null 。

---

如果您想方便但不那么安全，您可以就本地存储结果向编译器撒谎，并使用非空断言运算符 ( ! )断言它不是null ：

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

请注意，我添加了| null | null在那里手动，因为编译器再也看不到这种可能性。

Playground 代码链接

Answer 2

解决您的问题 IMO 的最简单方法就是这样做：

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

请注意无效的合并运算符 ( ?? ) 需要typescript 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");