TypeScript - 從型別建立型別

上一頁
下一頁

TypeScript 允許您從現有或內建型別建立自定義型別。從現有型別建立型別有助於使程式碼更易於維護和更不容易出錯。

TypeScript 是一種靜態型別語言。這意味著理想情況下，每個變數、函式引數和物件屬性都應顯式分配型別。

在這裡，我們將討論從現有型別建立自定義型別的不同方法。

聯合型別

如果您想定義一個可以儲存多個數據型別值的單個變數，您可以使用聯合運算子組合多個運算子。聯合運算子是“|”，您可以使用它來組合多個型別。

語法

您可以按照以下語法使用聯合運算子建立自定義型別。

type unionTypes = type1 | type2 | type3 | ...;

在上述語法中，type1、type2、type3 等是資料型別。

示例

在下面的程式碼中，我們定義了“StringOrNumber”自定義型別，它是字串和數字資料型別的聯合。

processValue() 函式採用“StringOrNumber”型別的單個引數。在函式體中，我們使用“typeof”運算子檢查引數的型別，並根據字串或數字型別在輸出控制檯中列印值。

// Defining a union type
type StringOrNumber = string | number;

// Function that accepts a union type as an argument
function processValue(value: StringOrNumber) {
    // Check if the value is a string or number type
  if (typeof value === "string") {
    console.log(`String: ${value}`);
  } else {
    console.log(`Number: ${value}`);
  }
}

processValue("hello"); // Output: String: hello
processValue(123);    // Output: Number: 123

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

// Function that accepts a union type as an argument
function processValue(value) {
    // Check if the value is a string or number type
    if (typeof value === "string") {
        console.log(`String: ${value}`);
    }
    else {
        console.log(`Number: ${value}`);
    }
}
processValue("hello"); // Output: String: hello
processValue(123); // Output: Number: 123

上述示例程式碼的輸出如下：

String: hello
Number: 123

交叉型別

交叉運算子 (&) 允許您將多個型別組合到單個型別中。例如，如果您有兩個關於業務和聯絡方式的介面或型別，並且想要組合這兩個型別，可以使用交叉運算子。

語法

您可以按照以下語法使用交叉運算子建立自定義型別。

type intersectionTypes = type1 & type2 & type3 & ...;

在上述語法中，我們使用交叉運算子組合了多個型別。

示例

在下面的程式碼中，我們定義了包含 name 和 turnover 屬性的“Business”介面。我們還定義了包含 email 和 phone 屬性的 contactDetails 介面。

之後，我們使用交叉運算子組合了這兩種型別並將它們儲存在“BusinessContact”型別中。接下來，我們定義了“BusinessContact”型別的物件，並在控制檯中記錄它。

// Defining a business type
interface Business {
    name: string;
    turnover: number;
}

// Defining a contact details type
interface ContactDetails {
    email: string;
    phone: string;
}

// Intersection of two types
type BusinessContact = Business & ContactDetails;

// Creating an object of the type BusinessContact
let contact: BusinessContact = {
    name: "EnviroFront",
    turnover: 5000000,
    email: "abc@gmail.com",
    phone: "1234567890"
};

console.log(contact);

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

// Creating an object of the type BusinessContact
let contact = {
    name: "EnviroFront",
    turnover: 5000000,
    email: "abc@gmail.com",
    phone: "1234567890"
};
console.log(contact);

上述示例程式碼的輸出如下：

{
  name: 'EnviroFront',
  turnover: 5000000,
  email: 'abc@gmail.com',
  phone: '1234567890'
}

實用工具型別

TypeScript 包含多個實用工具型別，這使得轉換特定型別和建立新型別變得容易。讓我們透過示例瞭解一些實用工具型別。

語法

您可以按照以下語法使用任何實用工具型別。

Utility_type_name<type or interface>

在上述語法中，“utility_type_name”可以根據您使用的實用工具型別替換為“Partial”、“Pick”、“Record”等。“type”或“interface”是從中想要建立新自定義型別的介面的名稱。

Partial 實用工具型別

partial 實用工具型別使介面或型別的屬性都可選。因此，您可以從現有型別建立一個新型別，該型別的所有屬性都是可選的。

示例

在下面的程式碼中，我們定義了“Todo”介面。之後，我們使用了 Partial 實用工具型別，透過使“Todo”介面的所有屬性都可選，來使用“Todo”介面建立一個新型別。

接下來，我們定義了“OptionalTodo”型別的物件，該物件僅包含“title”屬性，因為“description”屬性是可選的。

// Defining an interface for Todo list 
interface Todo {
    title: string;
    description: string;
}

// Defining a custom type using the Partial utility type
type OptionalTodo = Partial<Todo>;

// Creating an object of type OptionalTodo
let todo: OptionalTodo = { title: "Buy milk" }; // 'description' is optional

console.log(todo);

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

// Creating an object of type OptionalTodo
let todo = { title: "Buy milk" }; // 'description' is optional
console.log(todo);

上述示例程式碼的輸出如下：

{ title: 'Buy milk' }

Pick 實用工具型別

Pick 實用工具型別允許選擇現有型別的一部分屬性。讓我們透過下面的示例來理解它。

示例

在下面的程式碼中，我們定義了“ToDo”介面，並使用 Pick 實用工具型別從“ToDo”介面建立一個僅包含“title”屬性的新型別。在這裡，“ToDoPick”型別僅包含“title”屬性。

// Defining an interface for Todo list 
interface Todo {
    title: string;
    description: string;
}

// Defining a custom type using the Pick utility type
type TodoPick = Pick<Todo, "title">;

let myTodo: TodoPick = { title: "Write a code" };

console.log(myTodo.title);

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

let myTodo = { title: "Write a code" };
console.log(myTodo.title);

上述示例程式碼的輸出如下：

Write a code

typeof 型別運算子

typeof 運算子用於獲取特定變數的型別。您可以使用 typeof 變數來提取特定變數、物件、函式等的型別，並將該型別用於其他變數。

語法

您可以按照以下語法使用 typeof 型別運算子建立自定義型別。

Typeof variable;

在上述語法中，“variable”可以是物件、函式等。

示例

在下面的程式碼中，我們定義了包含 name 和 gender 屬性的 person 物件。之後，我們使用“typeof”運算子獲取 person 物件的型別並將其儲存在“employee”型別變數中。

之後，我們定義了“employee”型別的“employee1”物件，其中包含 name 和 gender 屬性。

// Defining a person object
const person = {
    name: "John",
    gender: "male"
};

// Defining a type employee
type employee = typeof person;  // Type is { url: string; timeout: number; }

// Defining an employee object
let employee1: employee = {
    name: "Sbv",
    gender: "male"
};

console.log(employee1);

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

// Defining a person object
const person = {
    name: "John",
    gender: "male"
};
// Defining an employee object
let employee1 = {
    name: "Sak",
    gender: "male"
};
console.log(employee1);

輸出如下：

{ name: 'Sak', gender: 'male' }

建立自定義型別允許您重用現有型別並編寫易於維護的程式碼。如果要提供可選型別或組合多個型別，可以使用聯合或交叉運算子。此外，您可以使用實用工具型別和 typeof 運算子從現有型別建立自定義型別。

列印頁面
上一頁
下一頁
廣告