为什么新的 `Pick<T, K extends keyof T>` 类型允许在 React 的 `setState()` 中使用 `K` 的子集？

Question

我以为我理解了新的TS 2.1 Pick type 的用途，但后来我看到了how it was being used in the React type definitions，我不明白：

declare class Component<S> {
    setState<K extends keyof S>(state: Pick<S, K>, callback?: () => any): void;
    state: Readonly<S>;
}

这允许您这样做：

interface PersonProps {
  name: string;
  age: number;
}

class Person extends Component<{}, PersonProps> {
  test() {
    this.setState({ age: 123 });
  }
}

我的困惑是keyof S 是{ name, age }，但我只用age 调用setState()——为什么它不抱怨缺少name？

我的第一个想法是，因为Pick 是一种索引类型，所以它根本不需要所有键都存在。说得通。但是如果我尝试直接分配类型：

const ageState: Pick<PersonProps, keyof PersonProps> = { age: 123 };

它确实抱怨缺少name 键：

Type '{ age: number; }' is not assignable to type 'Pick<PersonProps, "name" | "age">'.
  Property 'name' is missing in type '{ age: number; }'.

我不明白这一点。 似乎我所做的只是用 S 已分配给的类型填写 S，然后它从允许 子集键变为需要所有键。这是一个很大的区别。 Here it is in the Playground。谁能解释这种行为？

Answer 1

简答：如果你真的想要一个显式类型，你可以使用Pick<PersonProps, "age">，但是使用隐式类型更容易。

长答案：

关键是K 是一个泛型类型变量，扩展 keyof T。

类型keyof PersonProps 等于字符串联合"name" | "age"。 "age" 类型可以说是对"name" | "age" 类型的扩展。

回忆Pick的定义是：

type Pick<T, K extends keyof T> = {
  [P in K]: T[P];
}

这意味着对于每个K，此类型描述的对象必须具有与T 中的属性K 相同类型的属性P。您的示例游乐场代码是：

const person: Pick<PersonProps, keyof PersonProps> = { age: 123 };

解开泛型类型变量，我们得到：

• Pick<T, K extends keyof T>,
• Pick<PersonProps, "name" | "age">,
• [P in "name" | "age"]: PersonProps[P]，最后是
• {name: string, age: number}.

当然，这与{ age: 123 } 不兼容。如果你改为说：

const person: Pick<PersonProps, "age"> = { age: 123 };

那么，按照同样的逻辑，person 的类型将适当地等同于{age: number}。

当然，TypeScript 无论如何都会为你计算所有这些类型——这就是你得到错误的原因。由于 TypeScript 已经知道 {age: number} 和 Pick<PersonProps, "age"> 类型是兼容的，所以你最好保留类型隐含：

const person = { age: 123 };