如何为localStorage返回值实现TypeScript严格类型定义？

原代码示例 #

类型定义 #

export const enum AuctionsView {
  tiles = 'tiles',
  list = 'list'
}

状态初始化（存在类型安全隐患） #

const [auctionsView, setAuctionsView] = useState<AuctionsView>(
  localStorage.getItem('auctionsView') as AuctionsView ?? AuctionsView.tiles
)

状态存储逻辑 #

useEffect(() => {
  localStorage.setItem('auctionsView', auctionsView)
}, [auctionsView]);

当前代码通过as AuctionsView类型断言强制转换localStorage的返回值，但这种方式完全跳过了类型校验——如果localStorage中存储了不属于AuctionsView枚举的字符串，会直接导致类型不匹配的运行时隐患。以下是两种实现严格类型定义的方案：

方案1：自定义类型守卫函数 #

类型守卫能在运行时校验值的合法性，同时让TypeScript在编译时识别合法值的类型：

// 定义类型守卫，校验值是否属于AuctionsView枚举
function isAuctionsView(value: unknown): value is AuctionsView {
  return typeof value === 'string' && Object.values(AuctionsView).includes(value as AuctionsView);
}

// 修改状态初始化逻辑，加入类型校验
const [auctionsView, setAuctionsView] = useState<AuctionsView>(() => {
  const storedValue = localStorage.getItem('auctionsView');
  // 只有通过校验的值才会被使用，否则回退到默认值
  return isAuctionsView(storedValue) ? storedValue : AuctionsView.tiles;
});

方案2：通用泛型工具函数（可复用） #

如果需要在多个枚举类型上复用这类校验逻辑，可以封装一个通用泛型函数：

// 通用枚举校验函数，适配任意字符串枚举类型
function getValidEnumValue<T>(
  storedValue: string | null,
  enumType: Record<string, string>,
  defaultValue: T
): T {
  if (typeof storedValue === 'string' && Object.values(enumType).includes(storedValue)) {
    return storedValue as T;
  }
  return defaultValue;
}

// 使用泛型函数初始化状态
const [auctionsView, setAuctionsView] = useState<AuctionsView>(
  getValidEnumValue(localStorage.getItem('auctionsView'), AuctionsView, AuctionsView.tiles)
);

补充说明 #

TypeScript本身没有专门针对localStorage的内置泛型，但通过自定义类型守卫或通用泛型工具函数，既能实现严格的类型校验，又能避免类型断言带来的不安全问题。

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