Typescript 对于使用另一个对象键和值类型的对象使用TS Generics

{
  label: 'x',
  key: 'a', 
  render: (value) => value
}

不是ClickableItem<Example, keyof Example>的亚型，所以这里不会是satisfy.

ClickableItem<Example, keyof Example>扩展到这种类型:

type MyType = {
  label: string;
  key: 'a' | 'b'
  render?: (value: string | number) => string;
};

换句话说，您的代码与:

const itemFromSatisfies = {
  label: 'x',
  key: 'a',
  render: (value) => value //ERROR HERE
} satisfies {
  label: string;
  key: 'a' | 'b'
  render?: (value: string | number) => string;
}

请注意，key和render函数之间没有任何联系.这实际上是丢失的，因为您将keyof Example传递为K，因此您获得了一个适用于T中的all个键的对象类型.

但您的对象无法处理T中的all个键.它只能处理string，因为render必须返回string，而您只需返回原始值，因此很多都以string开头.

相反，您想要一个每个财产都有一名成员的unions .

type ClickableItemUnion<T extends Record<string, any>> = {
  [K in keyof T]: ClickableItem<T, K>
}[keyof T]


type MyTest = ClickableItemUnion<Example>
// ClickableItem<Example, 'a'> | ClickableItem<Example, 'b'>

此映射类型 for each T的属性创建一个联合，其中key和render属性可以一次一个强配对.

现在你这样做，它就会起作用:

const itemFromUnion = {
  label: 'x',
  key: 'a', 
  render: (value) => value
} satisfies ClickableItemUnion<Example>

这是因为该对象匹配Union的一个成员，其中key是'a'，并且render函数接受string.

因此，考虑到所有这些，我们可以通过使用映射类型来简化这个过程，该类型从一开始就产生联合:

type ClickableItem<
  T extends Record<string, any>,
  K extends keyof T
> = {
  [P in K]: {
    label: string;
    key: P;
    render?: (value: T[P]) => string;
  }
}[K];

此类型映射所请求的任何键的联合，并 for each 键生成联合.

所以现在:

type MyType = ClickableItem<Example, keyof Example>

与:

type MyType = {
    label: string;
    key: "a";
    render?: ((value: string) => string) | undefined;
} | {
    label: string;
    key: "b";
    render?: ((value: number) => string) | undefined;
}

因此可以在任何问题上使用satisfies约束:

const item = { // fine
  label: 'x',
  key: 'a', 
  render: (value) => value
} satisfies ClickableItem<Example, keyof Example>

See playground