iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
JavaScript

用 TypeScript 重新定義前端開發:30 天的實踐與思考系列 第 11

Day11:TypeScript 的型別別名 (Type Aliases)

  • 分享至 

  • xImage
  •  

型別別名 (Type Aliases)

在 TypeScript 中,型別別名提供了一個靈活的方式來簡化複雜型別,提升程式碼的可讀性,並且可以重複使用這些型別。透過型別別名,我們可以為現有的型別賦予新的名稱,讓程式碼更容易理解,尤其是在處理複雜的資料結構或多重型別時特別實用。

型別別名的功用:

  • 簡化複雜型別
  • 使程式碼可讀性提高
  • 建立可以在程式碼中重複被使用的型別

型別別名使用 type 關鍵字來宣告:

type alias = existingType;

多樣性應用實例

  • 原始型別別名(Primitive types)
    型別別名常見的應用是為原始型別建立更具語意的名稱。下例中,Name 是一個 string 型別的別名,用來聲明變數 firstNamelastName
type Name: string;

let firstName: Name;
let lastName: Name;

這樣的做法不只讓程式碼的用途更加明確,更減少重複的型別定義。

  • 物件型別別名(Object types)
    型別別名也可以應用在物件上。以下範例裡,Person 是一個包含 nameage 屬性的物件型別別名,讓程式碼更簡潔且具可讀性:
type Person = {
  name: string;
  age: number;
};

let person: Person = {
  name: 'John',
  age: 25
};

透過這樣的別名定義應用,當開發過程中需要多次使用這個物件結構時,就可以避免冗長的型別重複定義。

  • 聯合型別別名(Union Types)
    聯合型別允許變數可以是多種不同型別之一。以下範例展示了如何使用型別別名來簡化聯合型別的應用:
type unionInput = string | number;

let input: unionInput;
input = 777;     // ok
input = 'Hello'; // ok
input = false;   // error

好處是可以清楚表達變數可以接受的多種型別,從而提升程式碼的靈活性。

  • 交集型別別名(Intersection Types)
    交集型別允許我們將多個型別合併成一個型別。在下例中,我們建立了兩個型別 PersonalContact,然後使用交集型別來創建一個 Candidate 型別,包含這兩者的所有屬性:
type Personal = {
  name: string;
  age: number;
};

type Contact = {
  email: string;
  phone: string;
};

type Candidate = Personal & Contact;

let candidate: Candidate = {
  name: "Annie",
  age: 18,
  email: "annielin28815@gmail.com",
  phone: "(0977)-123-456"
};

透過交集型別別名,我們可以輕鬆地組合多個物件型別,為需要同時擁有多個型別特性的資料建立更加精確的描述。

結語

型別別名是一個強大的工具,無論是在簡化型別定義、提升程式碼可讀性,還是建立更靈活且可重複使用的型別,都能為開發者帶來便利。無論是處理原始型別、物件型別、聯合型別還是交集型別等,型別別名都能幫助我們打造更加健全和易維護的 TypeScript 應用程式。


參考資源:
TypeScript Type Aliases


上一篇
Day10:TypeScript 的介面 (Interface) 基本概念
下一篇
Day12:TypeScript 的泛型(Generics)基礎
系列文
用 TypeScript 重新定義前端開發:30 天的實踐與思考30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言