React+TS项目localStorage类型不兼容编译报错求解

你的问题根源是localStorage.getItem()的返回类型为string | null，TypeScript的类型检查不允许将可能为null的值直接赋值给string类型的变量或参数。以下是几种规范的处理方式：

1. 非空断言（仅确定值存在时使用） #

如果你能保证目标key在localStorage中一定存在，可以用非空断言运算符!告诉TypeScript该值不会为null：

const storedValue = localStorage.getItem('your-key')!;
// 此时storedValue的类型为string

注意：如果实际运行时该key不存在，会导致后续代码报错，所以仅在确定有值的场景使用。

2. 空值合并运算符设置默认值 #

如果允许当值不存在时使用默认字符串，用??空值合并运算符，它会在左侧为null或undefined时返回右侧的默认值，最终类型为string：

const storedValue = localStorage.getItem('your-key') ?? 'default-value';

3. 条件判断处理null情况 #

最安全的方式是先判断值是否为null，TypeScript会自动在代码块中推断类型为string：

const storedValue = localStorage.getItem('your-key');
if (storedValue !== null) {
  // 这里storedValue的类型自动变为string
  console.log(storedValue.length); // 不会有类型错误
} else {
  // 处理值不存在的逻辑，比如设置默认值或提示用户
}

为什么你之前的方法无效 #

• 移除|| null没用：因为localStorage.getItem()的类型定义本身就是string | null，手动移除改变不了TypeScript的内置类型判断。
• 使用any虽然能绕过错误，但会丢失TypeScript的类型校验能力，违背使用TS的初衷，不推荐。

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