TypeScript 4.6.4代码报错：如何解决string|null类型不兼容问题？

错误原因 #

localStorage.getItem('userData')的返回类型是string | null（当本地无对应键值时返回null），但JSON.parse()仅接受string类型参数，因此TypeScript抛出类型不匹配错误。// @ts-ignore注释在WebStorm仍提示错误，是因为IDE可能启用了更严格的检查规则，且这种做法会隐藏潜在运行时问题，不推荐使用。

正确解决方案 #

1. 先判断值是否存在，再解析（最安全）

通过条件判断确保传入JSON.parse的是有效字符串，同时处理无数据的场景：

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

if (storedData) {
  userData = JSON.parse(storedData);
  // 执行有用户数据时的逻辑
} else {
  // 处理无用户数据的情况，比如初始化空对象或跳转登录页
  userData = { email: '', id: '', _token: '', _tokenExpirationDate: '' };
}

2. 使用非空断言运算符（仅确定数据一定存在时使用）

如果能保证localStorage.getItem('userData')永远不会返回null，可使用!断言该值不为null：

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

注意：若实际运行时返回null，会触发JSON.parse的运行时错误，需谨慎使用。

3. 结合空值合并运算符设置默认值

给localStorage.getItem的返回值设置默认字符串，避免传入null：

// 默认解析为null，可根据需求调整默认值
const userData: {
  email: string;
  id: string;
  _token: string;
  _tokenExpirationDate: string;
} | null = JSON.parse(localStorage.getItem('userData') ?? 'null');

// 或默认初始化空对象
const userData: {
  email: string;
  id: string;
  _token: string;
  _tokenExpirationDate: string;
} = JSON.parse(localStorage.getItem('userData') ?? '{"email":"","id":"","_token":"","_tokenExpirationDate":""}');

内容的提问来源于stack exchange，提问作者GettingStarted