TypeScript - 類型別名

在 TypeScript 中，類型別名是一種定義型別的方式。它允許你為型別賦予一個特定的名稱，或者使用 'type' 關鍵字定義自定義型別。基本上，你可以對基本型別和非基本型別進行一些更改，並可以使用類型別名定義自定義資料型別。

語法

你可以按照以下語法在 TypeScript 中定義類型別名。

type aliasName = Type;

在上面的程式碼中，'type' 是一個關鍵字。'AliasName' 是類型別名的名稱。'Type' 可以是基本型別、非基本型別或任何自定義資料型別。

基本型別的別名

類型別名的基本用法是為基本型別建立別名，也就是建立基本型別的副本。例如，在實際應用中，與其直接使用字串或數字資料型別作為 userID 變數，我們可以建立 userID 別名並將型別儲存在其中，以提高程式碼的可維護性。

示例

在下面的程式碼中，我們定義了數字型別的 'UserID' 類型別名。'user1' 變數只能包含數字值，因為其型別是 'UserID'。

// Defining the type alias
type UserID = number;
// Defining the variable of type alias
let user1: UserID = 101;
console.log(user1);

編譯後，它將生成以下 JavaScript 程式碼。

// Defining the variable of type alias
let user1 = 101;
console.log(user1);

輸出如下：

聯合型別的別名

當你想定義一個可以包含多種型別值的變數時，可以使用聯合型別。例如，如果你正在開發一個接受多種型別輸入（如字串和數字）的函式，使用類型別名可以使函式簽名更加清晰。否則，如果在整個程式碼中重複聯合型別，可能會使程式碼變得複雜。

示例

在下面的程式碼中，'StringOrNumber' 類型別名包含字串和數字的聯合。logMessage() 函式接受字串或數字作為引數，因為引數型別是 'StringOrNumber'。

接下來，我們在傳遞字串和數字作為引數後執行了該函式。

type StringOrNumber = string | number;
function logMessage(message: StringOrNumber): void {
    console.log(message);
}
logMessage("Hello");
logMessage(123);

編譯後，它將生成以下 JavaScript 程式碼。

function logMessage(message) {
    console.log(message);
}
logMessage("Hello");
logMessage(123);

上面程式碼的輸出如下：

Hello
123

元組的別名

元組別名用於定義固定大小陣列的結構，該陣列可以按特定順序包含特定型別的值。

示例

在下面的程式碼中，我們定義了 'RGBColor' 元組來儲存顏色表示的 RGB 值。在這個元組別名中，所有值都是數字。

type RGBColor = [number, number, number];
let red: RGBColor = [255, 0, 0];
console.log(`Red color: ${red}`);

編譯後，它將生成以下 JavaScript 程式碼。

let red = [255, 0, 0];
console.log(`Red color: ${red}`);

上面程式碼的輸出如下：

Red color: 255,0,0

物件型別的別名

物件可以以鍵值對的形式擁有屬性。有時，你需要定義多個具有相同結構的物件，可以使用物件類型別名。透過為物件型別建立別名，你可以重複使用它。

示例

在下面的程式碼中，我們定義了 'User' 型別，它包含字串型別的 id 和 name 屬性。

'user' 物件包含字串型別的 id 和 name。

// Defining the type alias for the User object
type User = {
    id: string;
    name: string;
};

// Defining the user object using the User type alias
let user: User = { id: "101", name: "Alice" };
console.log(user);

編譯後，它將生成以下 JavaScript 程式碼。

// Defining the user object using the User type alias
let user = { id: "101", name: "Alice" };
console.log(user);

上面程式碼的輸出如下：

{ id: '101', name: 'Alice' }

函式型別的別名

在處理高階函式或回撥函式時，函式型別的別名尤其有用，它為函式應該接受和返回的內容提供了一個清晰的契約。

示例

在下面的程式碼中，'GreeterFunction' 定義了函式的型別。它以字串作為引數，並返回字串值。

'greet' 變數儲存型別為 'GreeterFunction' 的函式表示式。

// Define a function type
type GreeterFunction = (name: string) => string;
// Define a function that matches the type
const greet: GreeterFunction = name => `Hello, ${name}!`;
console.log(greet("TypeScript"));

編譯後，它將生成以下 JavaScript 程式碼。

// Define a function that matches the type
const greet = name => `Hello, ${name}!`;
console.log(greet("TypeScript"));

輸出如下：

Hello, TypeScript!

將類型別名與泛型一起使用

泛型型別用於建立自定義型別。它以 'T' 作為引數，並根據 'T' 型別建立新的型別。

示例

在下面的程式碼中，'Container' 型別接受 'T' 作為引數，並定義了型別為 'T' 的物件屬性值。

之後，在使用 'Container' 型別時，我們將資料型別作為引數傳遞。對於 'numberContainer' 變數，我們使用了 'number' 型別，對於 'stringContainer' 變數，我們使用了 'string' 資料型別。

// Defining the generic type alias
type Container<T> = { value: T };

// Using the generic type alias
let numberContainer: Container<number> = { value: 123 };
let stringContainer: Container<string> = { value: "Hello World" };

console.log(numberContainer);  // Output: { value: 123 }
console.log(stringContainer);  // Output: { value: 'Hello World' }

編譯後，它將生成以下 JavaScript 程式碼。

// Using the generic type alias
let numberContainer = { value: 123 };
let stringContainer = { value: "Hello World" };
console.log(numberContainer); // Output: { value: 123 }
console.log(stringContainer); // Output: { value: 'Hello World' }

上面程式碼的輸出如下：

{ value: 123 }
{ value: 'Hello World' }

類型別名是定義自定義型別的方式，也允許在定義一次後重複使用複雜型別。它還有助於提高程式碼可讀性並最大程度地降低程式碼複雜性。

列印頁面