TypeScript 是 JavaScript 的強大超集，它添加了靜態類型和其他功能來改善開發體驗。雖然許多開發人員熟悉基礎知識，但掌握進階 TypeScript 概念可以顯著增強編寫健全、可維護和可擴展程式碼的能力。以下是每個開發人員都應該了解的 10 個進階 TypeScript 概念。
聯合類型允許變數保存多種類型之一，讓您可以靈活地處理不同的資料類型，同時仍保持類型安全。就像擁有多功能工具？ ️可以處理不同的任務。
Example 1:
let value: string | number;
value = "Hello";
console.log(value); // "Hello"
value = 123;
console.log(value); // 123
Example 2:
type status = "review" | "published" | "expired";
function getJobStatus(status: status): string {
switch (status) {
case "review":
return "Job is on Review";
case "published":
return "Job is Published";
case "expired":
return "Job is Expired";
default:
return "Unknown status";
}
}
交集類型將多種類型合併為一種，要求一個變數具有組合類型的所有屬性。
interface Person {
name: string;
age: number;
}
interface Employee {
employeeId: number;
}
type Developer = Person & Employee;
const emp: Developer = {
name: "Alice",
age: 25,
employeeId: 12345
};
console.log(emp);
在此範例中，我們定義了兩種類型：Person 和 Employee，然後使用交集建立一個結合了 Employee 和 Person 屬性的 Developer 類型。這代表了開發人員在組織中的身分和角色。
類型保護可以幫助您縮小條件區塊中變數的類型範圍，從而確保類型安全。將他們視為保安保鑣？在夜總會，只讓合適的人進入。
function isString(value: any): value is string {
return typeof value === "string";
}
function printValue(value: string | number) {
if (isString(value)) {
console.log(value.toUpperCase());
} else {
console.log(value.toFixed());
}
}
printValue("Hello"); // "HELLO"
printValue(123); // "123"
類型保護：因為我們的生活都需要一點安全感。
條件類型可讓您根據條件建立類型，提供強大的類型轉換。這就像一本選擇自己的冒險書？ .
type IsString<T> = T extends string ? "Yes" : "No"; type Result1 = IsString<string>; // "Yes" type Result2 = IsString<number>; // "No"
條件類型非常強大，可讓您根據條件建立動態且靈活的類型。
映射類型可讓您透過對每個屬性套用轉換將現有類型轉換為新類型。
type Readonly<T> = {
readonly [P in keyof T]: T[P];
};
interface Todo {
title: string;
description: string;
}
const todo: Readonly<Todo> = {
title: "Learn TypeScript",
description: "Study advanced concepts"
};
// todo.title = "New Title"; // Error: Cannot assign to 'title' because it is a read-only property.
type Nullable<T> = {
[P in keyof T]: T[P] | null;
};
interface User {
id: number;
name: string;
email: string;
}
type NullableUser = Nullable<User>;
type NullableUser = {
id: number | null;
name: string | null;
email: string | null;
};
// In this example, Nullable transforms each property of User to also accept null.
範本文字類型可讓您透過組合字串文字來建立類型，使您的類型定義更具表現力。
type Color = "red" | "green" | "blue";
type Brightness = "light" | "dark";
type Theme = `${Brightness}-${Color}`;
const theme1: Theme = "light-red";
const theme2: Theme = "dark-blue";
// const theme3: Theme = "bright-yellow"; // Error: Type '"bright-yellow"' is not assignable to type 'Theme'.
模板文字類型可讓您定義必須遵循亮度-顏色模式的主題類型。這就像為您的類型提供了可供遵循的風格指南。
遞歸類型是引用自身的類型，可讓您對樹和鍊錶等複雜資料結構進行建模。
為樹結構建立遞歸類型：
interface TreeNode {
value: number;
left?: TreeNode;
right?: TreeNode;
}
const tree: TreeNode = {
value: 1,
left: {
value: 2,
left: { value: 3 },
right: { value: 4 }
},
right: {
value: 5
}
};
遞歸類型：因為有時你需要永遠持續下去的類型，就像無限循環（但以一種好的方式）。
TypeScript 是一個強大的工具，掌握這些進階概念可以讓您的程式碼更加健壯、可維護並且非常棒。當您繼續探索這些進階功能時，您會發現您的程式碼變得更加簡潔，您的類型定義更加精確，並且您的整體開發工作流程更加順暢。
編碼愉快！ ？
以上是每個開發人員都應該了解的高階 TypeScript 概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！
