如何在TypeScript中定义组件Props的通用提供者属性对象？

你需要将ComponentProps里的XXX替换为Partial<Record<Providers, Provider>>，也可以使用等价的映射类型{ [K in Providers]?: Provider }，两种写法都能满足需求。

类型说明 #

• Record<Providers, Provider>：TypeScript内置工具类型，用于生成一个对象类型，其键为Providers枚举的所有成员，对应的值必须符合Provider类型。
• Partial<>：将包裹的对象类型的所有属性转为可选，这样你可以灵活传入任意数量的提供者（仅传facebook、同时传facebook和google，甚至不传都合法），完美匹配“属性数量可灵活变化”的要求。

修改后的完整代码示例 #

export enum Providers{
  facebook="facebook",
  google="google"
}

export type Provider = {
  id:string;
  name:string;
}

export interface ComponentProps{
  providers?: Partial<Record<Providers, Provider>>;
}

export const Component = ({providers}: ComponentProps) => {
  return <>
{providers?.facebook && "Has Facebook"} {providers?.google && "Has Google"}
</>;
}

// 合法传参示例：
<Component providers={{
  facebook: {
    id: 'test',
    name: 'test'
  }
}}/>

等价写法（映射类型） #

如果更习惯手动定义映射类型，也可以写成：

export interface ComponentProps{
  providers?: { [K in Providers]?: Provider };
}

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