iT邦幫忙

2021 iThome 鐵人賽

DAY 5
0
Modern Web

React 前端工程師的兩把刷子系列 第 5

[Day05] TS:如何把物件型別的所有屬性值取出變成 union type?試試 Indexed Access Types

  • 分享至 

  • xImage
  •  

昨天我們知道可以使用 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 operatoy

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

keyof operator

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

參考資料


上一篇
[Day04] TS:如何把物件型別的所有屬性名稱取出變成 union type?試試看 keyof 吧!
下一篇
[Day06] TS:整合前幾天所學,來寫個 Generic Functions 吧!
系列文
React 前端工程師的兩把刷子30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
TD
iT邦新手 4 級 ‧ 2021-09-20 22:44:29

喔喔喔學到了!

我要留言

立即登入留言