TypeScript动态对象键类型问题：多类型details参数适配方案

当子组件Child接收多组固定结构的数组作为details props时，直接用联合数组类型定义props会导致TypeScript无法识别动态键的类型，硬编码所有键又不符合“仅保留父组件传入的键”的需求，还无法支持未来的扩展。这里用泛型组件就能完美解决问题：

完整解决方案代码 #

const Component = () => {
  return (
    <>
      <Child details={["age", "location", "country"]} />
      <Child details={["gender", "height", "weight"]} />
      // 未来扩展的新类型无需修改子组件，直接传入即可
      <Child details={["job", "salary", "company"]} />
    </>
  )
}

// 原有联合类型可保留（可选，也可完全依赖泛型推断）
type DetailsOne = "age" | "location" | "country"
type DetailsTwo = "gender" | "height" | "weight"
type Details = DetailsOne | DetailsTwo

// 用泛型定义子组件Props，让类型依赖传入的具体数组
interface ChildProps<T extends readonly string[]> {
  details: T
}

// 子组件使用泛型，让TypeScript自动推断数组元素的类型
const Child = <T extends readonly string[]>({ details }: ChildProps<T>) => {
  const getDetails = () => {
    // 提取当前数组元素的联合类型，替代全局的Details
    type DetailKeys = T[number]
    
    // 用Object.fromEntries生成对象，类型推断更顺畅
    const entries = details.map(key => [key, "someValue"] as const)
    const values = Object.fromEntries(entries) as Record<DetailKeys, string>

    return values
  }

  getDetails()
  return null
}

关键逻辑说明 #

1. 泛型约束：T extends readonly string[]限制details为只读字符串数组，让TypeScript能精准推断数组的字面量类型。
2. 动态键类型提取：T[number]会把数组的所有元素提取为联合类型，比如传入["age", "location", "country"]时，DetailKeys就是"age" | "location" | "country"。
3. 类型安全的对象生成：用Object.fromEntries结合as const，确保生成的对象键完全匹配传入的details元素，不会出现多余或缺失的键，同时避免TypeScript报错。

这种方案天然支持扩展——未来新增任何结构的details数组，直接传入子组件即可，无需修改类型定义。

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