跳至主要内容

[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：

Indexed Access Types

而這種透過 Object 的 Index 來取得其型別的方式，就稱作是 Indexed Access Type：

indexed access types

如果想要取得的不只是 age 的屬性值型別，還想同時取出 isEmployed 的屬性型別值的話，同樣的可以搭配使用 union type：

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

可以得到 AgeAndIsEmployedOfPerson 的型別就會是 number | boolean：

keyof operator

要如何取出所有物件型別的屬性值呢？​

那麽如果想要取出的是該物件型別中的「所有屬性值的型別」的話可以怎麼做呢？

從上一個段落可以看到，在 [] 中以 union type 帶入多個 key 的話，就可以取出不只一個物件屬性值的型別，現在如果想要取得的是所有物件型別的屬性值，是不是只需要把物件型別的所有 key 先組成 union type 後，再代入 [] 就可以了呢？

這裡的關鍵字是「把物件型別的所有 key 先組成 union type」。這不就是昨天的內容嗎？

也就是說，使用昨天提到的 keyof Person，就可以取得所有物件型別的 key，並組成 union type，接著只要把它帶入 [] 內：

keyof operator

結果就和我們預期的一樣，ValuesOfPerson 會是 Person 這個物件型別的所有屬性值所組出來的 union type，也就是 string | number | boolean：

keyof operator

因此，當你未來有需要取得所有物件型別中的屬性值時，記得使用 keyof operator + indexed access types 的組合技。

參考資料​