如何将LocalStorage值加载到TypeScript类型化偏好对象中？

问题核心是TypeScript无法自动将LocalStorage取出的string值与IPreferences中对应键的联合类型关联，导致赋值时报错。以下是几种更优的解决方案：

方案一：使用类型守卫实现类型安全与运行时验证 #

先定义键与对应类型的映射，再通过类型守卫函数验证值的合法性，让TypeScript能正确推断类型：

type ONOFF = 'ON' | 'OFF';
type DIRECTION = 'NORTH' | 'SOUTH' | 'EAST' | 'WEST';

enum KEY {
  DESTINATION = 'destination',
  ORIGIN = 'origin',
  LIGHTMODE = 'lightMode',
};

interface IPreferences {
  [KEY.DESTINATION]: DIRECTION; 
  [KEY.ORIGIN]: DIRECTION;
  [KEY.LIGHTMODE]: ONOFF;
};

// 定义键到对应类型的映射
type KeyToType = {
  [K in KEY]: IPreferences[K]
};

// 类型守卫：验证值是否符合对应键的类型
function isPreferenceValue<K extends KEY>(key: K, value: string): value is KeyToType[K] {
  switch(key) {
    case KEY.DESTINATION:
    case KEY.ORIGIN:
      return ['NORTH', 'SOUTH', 'EAST', 'WEST'].includes(value);
    case KEY.LIGHTMODE:
      return ['ON', 'OFF'].includes(value);
    default:
      return false;
  }
}

// 加载存储的偏好设置
const stored: Partial<IPreferences> = {};
Object.values(KEY).forEach((preference) => {
  const value = localStorage.getItem(preference);
  if (value && isPreferenceValue(preference, value)) {
    stored[preference] = value;
  }
});

这种方式既保证了TypeScript的类型检查，又通过运行时验证避免非法值存入配置。

方案二：使用Object.fromEntries构建类型安全对象 #

通过Object.fromEntries批量处理键值对，配合简单验证后断言类型：

// 省略基础类型定义（同方案一）

const stored = Object.fromEntries(
  Object.values(KEY).map(key => {
    const value = localStorage.getItem(key);
    // 根据键判断合法值范围
    const validValues = key === KEY.LIGHTMODE 
      ? ['ON', 'OFF'] 
      : ['NORTH', 'SOUTH', 'EAST', 'WEST'];
    
    if (value && validValues.includes(value)) {
      return [key, value];
    }
    // 非法值或无值时返回undefined，不存入对象
    return [key, undefined];
  })
) as Partial<IPreferences>;

此方案代码更简洁，同样保留了运行时验证，避免类型断言带来的风险。

方案三：泛型函数封装单个偏好读取逻辑 #

用泛型函数封装每个键的读取与验证，让TypeScript自动推断返回类型：

// 省略基础类型定义（同方案一）

type KeyToType = {
  [K in KEY]: IPreferences[K]
};

// 泛型函数：获取单个偏好设置，返回对应类型或null
function getPreference<K extends KEY>(key: K): KeyToType[K] | null {
  const value = localStorage.getItem(key);
  if (!value) return null;

  switch(key) {
    case KEY.DESTINATION:
    case KEY.ORIGIN:
      if (['NORTH', 'SOUTH', 'EAST', 'WEST'].includes(value)) {
        return value as KeyToType[K];
      }
      break;
    case KEY.LIGHTMODE:
      if (['ON', 'OFF'].includes(value)) {
        return value as KeyToType[K];
      }
      break;
  }
  // 非法值返回null
  return null;
}

// 构建存储对象
const stored: Partial<IPreferences> = {};
Object.values(KEY).forEach(key => {
  const value = getPreference(key);
  if (value) {
    stored[key] = value;
  }
});

这种方式将读取逻辑封装，代码复用性更高，也便于后续扩展新的偏好项。

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