TypeScript嵌套对象类型标注：解决initialState[a][b]的类型报错

报错原因 #

参数a和b被定义为宽泛的string类型，TypeScript无法确认它们是initialState的合法索引键，因此隐式推断initialState[a][b]为any类型，触发报错。

下面提供两种解决方案，优先推荐第一种（保留类型安全）：

方法1：通过泛型+联合类型约束参数合法取值 #

先定义initialState的明确类型，再用泛型关联顶级键a和对应的子键b，确保参数只能是合法的索引值：

// 定义State类型，明确结构
type State = {
  food: { pizza: boolean; chicken: boolean };
  transport: { bus: boolean; car: boolean };
};

// 定义子键类型，关联对应的顶级键
type SubKey<T extends keyof State> = keyof State[T];

function testTypescript<T extends keyof State>(a: T, b: SubKey<T>) {
  const initialState: State = {
    food: {
      pizza: false,
      chicken: false,
    },
    transport: {
      bus: false,
      car: false,
    },
  };
  // 此时a和b都是合法索引，TypeScript能正确推断类型
  const newData = !initialState[a][b];
  // 修正原代码的类型错误：原代码将[a]赋值为boolean，与原对象结构冲突
  const newState = {
    ...initialState,
    [a]: { ...initialState[a], [b]: newData }
  };
  return newState;
}

方法2：类型断言临时解决（不推荐） #

如果无法修改参数类型，可通过类型断言强制告诉TypeScripta和b是合法索引，但会丢失类型检查的安全性：

function testTypescript(a: string, b: string) {
  const initialState = {
    food: {
      pizza: false,
      chicken: false,
    },
    transport: {
      bus: false,
      car: false,
    },
  };
  // 用类型断言指定合法索引类型
  const stateKey = a as keyof typeof initialState;
  const subKey = b as keyof typeof initialState[typeof stateKey];
  const newData = !initialState[stateKey][subKey];
  // 同样修正newState的赋值逻辑
  const newState = {
    ...initialState,
    [a]: { ...initialState[stateKey], [b]: newData }
  };
  return newState;
}

注意 #

原代码中newState的赋值逻辑存在类型错误：initialState[a]是对象类型，但newData是boolean类型，直接赋值会导致结构不匹配，上述方案已修正该问题。

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