[Day05] TS：如何把物件型别的所有属性值取出变成 union type？试试 Indexed Access Types

昨天我们知道可以使用 keyof 的方式取出物件属性 key，那麽如果我们是想要取出物件型别中属性值的型别呢？

例如，有一个物件型别 Person 长这样：

type Person = {
  firsName: string;
  lastName: string;
  age: number;
  isEmployed: boolean;
};

假设我们想要取出 Person 物件型别中 age 的型别时，方式很简单，可以像 JavaScript 使用 bracket syntax 来取出物件属性值的方法一样，像是这样：

// 建立一个新的名称为 AgeOfPerson 的型别
// 它的型别会是 Person 物件属性 "age" 值的型别
type AgeOfPerson = Person["age"];

如此就可以得到它 AgeOfPerson 的型别会是 number：

而这种透过 Object 的 Index 来取得其型别的方式，就称作是 Indexed Access Type：

如果想要取得的不只是 age 的属性值型别，还想同时取出 isEmployed 的属性型别值的话，同样的可以搭配使用 union type：

type AgeAndIsEmployedOfPerson = Person['age' | 'isEmployed'];

可以得到 AgeAndIsEmployedOfPerson 的型别就会是 number | boolean：

要如何取出所有物件型别的属性值呢？

那麽如果想要取出的是该物件型别中的「所有属性值的型别」的话可以怎麽做呢？

从上一个段落可以看到，在 [] 中以 union type 带入多个 key 的话，就可以取出不只一个物件属性值的型别，现在如果想要取得的是所有物件型别的属性值，是不是只需要把物件型别的所有 key 先组成 union type 後，再代入 [] 就可以了呢？

这里的关键字是「把物件型别的所有 key 先组成 union type」。这不就是昨天的内容吗？

也就是说，使用昨天提到的 keyof Person，就可以取得所有物件型别的 key，并组成 union type，接着只要把它带入 [] 内：

结果就和我们预期的一样，ValuesOfPerson 会是 Person 这个物件型别的所有属性值所组出来的 union type，也就是 string | number | boolean：

因此，当你未来有需要取得所有物件型别中的属性值时，记得使用 keyof operator + indexed access types 的组合技。

参考资料

• Indexed Access Types @ TypeScript > Type Manipulation