[Day04] TS：如何把物件型别的所有属性名称取出变成 union type？试试看 keyof 吧！

前面两天的文章中我们谈到泛型（generics）的使用，以及如何透过 extends 来限制泛型可被带入的型别。在後面的内容中，会越来越着重在如何透过 type 来产生另一个 type。

今天就来看看 keyof 的使用。

区分物件型别（type）和物件（value）

keyof 顾名思义就是把「物件型别（object type）」的 key 拿出来，但要留意的是，这里提到的是「物件型别」，而不是真的「物件」，前者是 TypeScript 的型别，後者是 JavaScript 中的一个物件（object）：

// Person 是一个 object type
type Person = {
  firsName: string;
  lastName: string;
};

// person 是 JavaScript 的 object (value)
const person = {
  firstName: 'Aaron',
  lastName: 'Chen',
};

如果不小心把真正的 object 当成 typescript 的 type 来使用的话，因为它不是型别的缘故，TypeScript 是会报错的：

keyof operator 的使用

而这里提到的 keyof 就只能用在「物件型别」上，使用方式非常简单：

// Person 是一个 object type
type Person = {
  firsName: string;
  lastName: string;
};

type PersonKey = keyof Person;

滑鼠移到 PersonKey 上後将会看到：

实际上的意思则是 "firsName" | "lastName"：

简单来说，透过 keyof operator，就可以取出物件型别的 key，并建立成一个新的 type：

搭配 & string 使用

由於「物件型别（object types）」的属性名称不一定是 string，也有可能是 number symbol，因此若有需要的话，可以搭配交集（&）的使用，也就是 & string：

type PersonKey = keyof Person & string; 

注：「物件型别」的 key 可以是 string、number 或 symbol，但 JavaScript 中「物件」的 key 只会是 string 或 symbol。

这时候 TS 就会明确知道说你要取出的是型别为 string 的 object key：

小知识：any 的 keyof 是？

在 TypeScript 中，透过 keyof 则可以看到 any 的型别是 string | number | symbol：

type KeyOfAny = keyof any; // type KeyOfAny = string | number | symbol

也就是说，在 TypeScript 中，能接受作为 key 的型别只能是 string、number 或 symbol，其他的型别像是 boolean 或 function 是不能被当作 key 的。

当我们试着把 object key 指定为 boolean 时，TS 会报错：

参考资料

• Keyof Type Operator @ TypeScript > Type Manipulation
• Object Types @ TypeScript > Everyday Types