如何通过传入Hook的剩余参数实现React Context的按需解构

错误原因 #

• 标识符重复：函数的剩余参数已经命名为configArgs，后续解构时再次声明同名变量触发命名冲突
• 解构逻辑错误：对象剩余解构只能提取未被显式声明的属性，无法实现按传入的枚举值筛选属性的需求
• 剩余参数类型错误：剩余参数本质是数组，类型标注应为ConfigItem[]而非ConfigItem

修正后完整代码 #

const useConfig = <T extends ConfigItem>(...configArgs: T[]) => {
  const configContext = useContext(ConfigContext);
  const { config } = configContext;
  // 遍历传入的枚举项，筛选对应配置生成新对象
  return configArgs.reduce((result, item) => {
    result[item] = config[item];
    return result;
  }, {} as Record<T, boolean>);
}

使用效果验证 #

// 传入多个枚举值
const config = useConfig(ConfigItem.SomeItem, ConfigItem.AnotherItem);
// 返回值结构符合预期：{ SomeItem: 对应布尔值, AnotherItem: 对应布尔值 }
// TS类型自动推导为 Record<ConfigItem.SomeItem | ConfigItem.AnotherItem, boolean>

// 传入单个枚举值
const singleConfig = useConfig(ConfigItem.SomeItem);
// 返回值结构符合预期：{ SomeItem: 对应布尔值 }
// TS类型自动推导为 Record<ConfigItem.SomeItem, boolean>

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