iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0
自我挑戰組

React 開發者的 TypeScript 探索之旅系列 第 8

【 Day 08 】合併型別與 Literal Types

  • 分享至 

  • xImage
  •  

type 合併用法

首先,我們以餐廳與顧客為例,定義一個簡單的例子:

type Restaurant = {
  menu: string[]
  address: string
}

type Client = {
  name: string
  phone: string
}

假設在某些情況下,餐廳只需要 menuaddress 這兩個屬性,而在其他情況下又需要 namephone 屬性,這時我們該怎麼處理呢?

一個常見的做法可能是把它們的屬性通通放進一個型別中:

type RestaurantDetails = {
  menu: string[]
  address: string
  name: string
  phone: string
}

但這顯然不是最好的做法,畢竟我們已經將型別提取出來了。這時候,我們可以通過 TypeScript 中的 & 語法來合併兩個型別。這樣不僅能保持型別的分離,還提高了可讀性和維護性:

type Restaurant = {
  menu: string[]
  address: string
}

type Client = {
  name: string
  phone: string
}

type RestaurantDetails = Restaurant & Client

let restaurantInfo: RestaurantDetails

restaurantInfo = {
  menu: ['burger', 'pizza'],
  address: '123 main st',
  name: 'HAHA Restaurant',
  phone: '123-456-7890',
}


interface 合併用法

與前面的 type 合併寫法有所不同,在 interface 中,我們使用 extends 來合併型別。這種方式可以合併多個型別,只要在它們之間加上逗號 , 隔開即可:

interface Restaurant {
  menu: string[]
  address: string
}

interface Client {
  name: string
  phone: string
}

interface RestaurantDetails extends Restaurant, Client {}

let restaurantInfo: RestaurantDetails

restaurantInfo = {
  menu: ['burger', 'pizza'],
  address: '123 main st',
  name: 'HAHA Restaurant',
  phone: '123-456-7890',
}

根據我們前一篇文章提到的 interface 擴充特性,合併之後仍然可以進行擴充,並且不會影響現有結構:

interface Restaurant {
  menu: string[]
  address: string
}

interface Client {
  name: string
  phone: string
}

interface RestaurantDetails extends Restaurant, Client {
  minimumOrder: number
}

let restaurantInfo: RestaurantDetails

restaurantInfo = {
  menu: ['burger', 'pizza'],
  address: '123 main st',
  name: 'HAHA Restaurant',
  phone: '123-456-7890',
  minimumOrder: 20,
}


Literal Types

Literal Types 是指在型別系統中,直接指定一個特定的值,而不只是指定一個範圍內的型別。例如,當我們知道變數只會是某個固定值的時候,可以使用 Literal Types 來限制該變數的值:

type Status = 'open' | 'closed'

let restaurantStatus: Status

restaurantStatus = 'open' // 正確
restaurantStatus = 'closed' // 正確
restaurantStatus = 'pending' // 錯誤,因為 'pending' 不是 'open' 或 'closed'

也可以應用在我們之前提過的陣列型別:

type Permission = 'camera' | 'microphone' | 'closeRoom' | 'openRoom'

let arr: Array<Permission>

arr = ['camera', 'microphone']

這樣的寫法可以提高程式碼的嚴謹性,並在某些情境下有效防止潛在的錯誤。


上一篇
【 Day 07 】Custom Types & Interface
下一篇
【 Day 09 】泛型
系列文
React 開發者的 TypeScript 探索之旅30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言