为什么新的 Pick 类型允许 React 的 setState() 中 K 的子集？

我以为我明白了新的目的TS 2.1 Pick type https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-1.html#partial-readonly-record-and-pick，但后来我看到它是如何在 React 类型定义中使用的 https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/react/index.d.ts#L171我不明白：

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 is { name, age }但我打电话setState()仅与age——为什么它不抱怨失踪name?

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

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

It does抱怨失踪name key:

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

我不明白这一点。它seems我所做的只是填写S与类型S已经分配给，并且它从允许sub-set要求的关键all键。这是一个很大的区别。这是在操场上 http://www.typescriptlang.org/play/#src=declare%20class%20Component%3CP%2C%20S%3E%20%7B%0A%20%20%20%20setState%3CK%20extends%20keyof%20S%3E(state%3A%20Pick%3CS%2C%20K%3E%2C%20callback%3F%3A%20()%20%3D%3E%20any)%3A%20void%3B%0A%20%20%20%20state%3A%20Readonly%3CS%3E%3B%0A%7D%0A%0Ainterface%20PersonProps%20%7B%0A%20%20name%3A%20string%3B%0A%20%20age%3A%20number%3B%0A%7D%0A%0Aclass%20Person%20extends%20Component%3C%7B%7D%2C%20PersonProps%3E%20%7B%0A%20%20test()%20%7B%0A%20%20%20%20const%20person%3A%20Pick%3CPersonProps%2C%20keyof%20PersonProps%3E%20%3D%20%7B%20age%3A%20123%20%7D%3B%0A%20%20%20%20this.setState(%7B%20age%3A%20123%20%7D)%3B%0A%20%20%7D%0A%7D。谁能解释这种行为？

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

长答案：

关键点是K是一个泛型类型变量extends keyof T.

方式keyof PersonProps等于字符串并集"name" | "age"。方式"age"可以说是扩展类型"name" | "age".

回想一下定义Pick is:

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

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

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} and Pick<PersonProps, "age">是兼容的，你不妨保持类型隐式：

const person = { age: 123 };