如何基于已有接口动态创建TypeScript的Context Dispatch类型？

要给reducer函数的第二个参数创建类型约束：参数必须包含action和value属性，且action的值对应DefaultValueContextInterface接口的某个属性名，value的类型必须和该属性的类型严格匹配，同时要避免手动编写大量联合类型。

当前尝试的映射类型会生成一个对象而非所需的联合类型，而直接用keyof定义的类型无法关联action和value的对应关系，导致类型检查失效。

解决方案 #

通过映射类型结合索引访问，可以自动生成符合要求的联合类型：

interface DefaultValueContextInterface {
    floatMsgError: string;
    isOpenSidebar: boolean;
    // 其他属性...
}

// 自动生成关联action与value类型的联合类型
type ActionProps = { 
  [P in keyof DefaultValueContextInterface]: {
    action: P;
    value: DefaultValueContextInterface[P];
  } 
}[keyof DefaultValueContextInterface];

代码说明 #

1. 首先通过[P in keyof DefaultValueContextInterface]遍历接口的所有属性，为每个属性P生成对应的{ action: P; value: 对应属性类型 }对象类型；
2. 最后通过[keyof DefaultValueContextInterface]索引访问映射后的对象，将所有对象类型提取出来合并成联合类型，这样每个action和对应的value类型就严格绑定了。

应用到reducer中 #

修改后的reducer会获得完整的类型推断和检查：

const reducer = (
    state: DefaultValueContextInterface,
    props: ActionProps
) => {
  switch(props.action) {
    case 'floatMsgError':
      // 此处props.value自动推断为string类型
      return {...state, floatMsgError: props.value};
    case 'isOpenSidebar':
      // 此处props.value自动推断为boolean类型
      return {...state, isOpenSidebar: props.value};
    default:
      return state;
  }
};

当DefaultValueContextInterface新增或修改属性时，ActionProps会自动同步更新，无需手动维护联合类型，确保类型始终一致。

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