带有方括号的Typescript类型声明

Question

刚刚在https://www.typescriptlang.org/docs/handbook/advanced-types.html#type-防护和区别类型

type FunctionPropertyNames<T> = {
[K in keyof T]: T[K] extends Function ? K : never;
}[keyof T];
type FunctionProperties<T> = Pick<T, FunctionPropertyNames<T>>;

类型声明后的[keyof T]是什么意思，它是如何命名的？

同样，[keyof T]看起来像是编译器的一个提示，即FunctionalPropertyNames中的键是来自T的键，但为什么编译器不能从[K in keyof T]中推断出这一点呢？

Answer 1

简短解释：这个用法，获取所有属性的所有值类型。

---

首先，[]在一个类型之后通过使用一个(或多个(密钥访问该类型来钻入该类型

type A = { foo: string }
type B = A['foo'] // string

---

其次，这里有一个映射类型。这意味着它是一个映射到某个类型的所有键上的类型，对其进行转换，然后返回一个新类型。

所以让我们先来看看这部分：

type StripNonMethods<T> = {
[K in keyof T]: T[K] extends Function ? K : never;
}

无论T是什么，这将为T的所有键生成一个类型，其中每个属性的值要么是属性的名称(如果该值是函数(，要么是never(如果它不是函数(。

这将改变：

type T1 = { a(): void, b: number }

进入：

type T2 = StripNonMethods<T1> // { a: 'a', b: never }

但是这里想要的结果是字符串'a'，因为我们试图获得所有作为函数的属性名。因此，我们使用它自己的键来深入到该类型，它将所有属性的所有值作为一个并集返回，最后为[keyof T]。

现在将返回：

type T3 = T2[keyof T2] // 'a' | never

因为never永远不可能存在，根据定义，它被简化出并集，你只得到：

'a'

游乐场

Answer 2

带有方括号的语法称为索引访问类型。它用于获取特定类型的属性类型。例如：

假设我们有一种叫做AlmostRangular的类型：

type AlmostRectangle = {
name: string;
a: number;
b: number;
start: Date;
};

我们可以通过使用索引访问类型语法来获取特定属性的类型：

type NameType = AlmostRectangle["name"]; // string

我们可以将键名称的并集传递到方括号中，以获得属性类型的并集，例如：

type MultipleTypes = AlmostRectangle["name" | "start"] // string | Date

keyof AlmostRectangle返回AlmostRectangle属性名称的并集："name" | "a" | "b" | "start"。我们可以使用它来获取所有的AlmostRangular特性类型：

type AlmostRectangleProperty = AlmostRectangle[keyof AlmostRectangle] // string | number | Date