什麼是 type 關鍵字？

type 關鍵字是 TypeScript 中一個重要特性，它的主要功能是定義自訂的型別別名。這個特性允許我們建立一個易於理解的名稱來引用現有型別或建立新的型別。

增加程式碼可讀性與重用性

未使用 type：

function combine(
  input1: number | string,
  input2: number | string,
  resultConversion: 'as-number' | 'as-text'
) {
  let result;
  if (
    (typeof input1 === 'number' && typeof input2 === 'number') ||
    resultConversion === 'as-number'
  ) {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
};

使用 type：

當我們使用 type 關鍵字定義自訂型別，當型別中包含聯合型別時，我們只需引用該自訂型別的名稱，而不需要明確列出聯合型別的成員。

type Combinable = number | string;
type ConversionDescriptor = 'as-number' | 'as-text';

function combine(
  input1: Combinable,
  input2: Combinable,
  resultConversion: ConversionDescriptor
) {
  let result;
  if (
    (typeof input1 === 'number' && typeof input2 === 'number') ||
    resultConversion === 'as-number'
  ) {
    result = +input1 + +input2;
  } else {
    result = input1.toString() + input2.toString();
  }
  return result;
};

型別的多樣用法

型別別名可用於建立自己的型別，並不僅限於聯合型別。它可以用於組合現有的型別，或建立更複雜的型別結構，以滿足具體程式碼的需求。

物件型別

type Person = {
  name: string;
  age: number;
};

let person: Person;

person = {
  name: '肉鬆',
  age: 30,
};

console.log(person); // {name: '肉鬆', age: 30}

函式型別

type Person = {
  name: string;
  age: number;
};

const person: Person = {
  name: '肉鬆',
  age: 30,
};

const greet = (person: Person) => {
  console.log(`我是${person.name}`); // 我是肉鬆
};

greet(person);

交集型別

使用 & 符號來表示交集型別，允許將多個型別合併成一個新的型別，新型別將包含所有原始型別的屬性，後續會詳細介紹該型別。

type Person = {
  name: string;
  age: number;
};

type Employee = {
  employeeId: number;
  department: string;
};

type PersonInfo = Person & Employee;

const personInfo: PersonInfo = {
  name: '肉鬆',
  age: 30,
  employeeId: 12345,
  department: '技術部門',
};

console.log(personInfo); // {name: '肉鬆', age: 30, employeeId: 12345, department: '技術部門'}

泛型型別

type 也可以用於定義泛型型別，這是一種宣告型別時使用參數的方式，後續會詳細介紹該型別。

type Container<T> = {
  value: T;
};

const numberContainer: Container<number> = {
  value: 30,
};

const stringContainer: Container<string> = {
  value: '我是肉鬆',
};

const numValue: number = numberContainer.value;
console.log(numValue); // 30

const stringValue: string = stringContainer.value;
console.log(stringValue); // 我是肉鬆

本日重點

1. 命名規範：以大寫字母開頭，有助於與普通變數或函式區分。
2. 自訂型別別名：使用 type 關鍵字，你可以給型別賦予有意義的名稱，讓程式碼更易讀。同時，它減少了在程式碼中重複定義型別的需求。
3. 型別的重用性：一旦你定義了一個型別，你可以在多個地方重複使用它，這樣可以節省時間並保持程式碼的一致性。
4. 多樣性的型別支援：type 關鍵字支援多種型別，包括物件、函式、聯合、交集等，使你能夠根據需要創建各種不同類型的型別，提高程式碼的適應性。

參考

• TypeScript - 型別別名