每個開發人員都應該了解的高階 TypeScript 概念

TypeScript 是 JavaScript 的強大超集，它添加了靜態類型和其他功能來改善開發體驗。雖然許多開發人員熟悉基礎知識，但掌握進階 TypeScript 概念可以顯著增強編寫健全、可維護和可擴展程式碼的能力。以下是每個開發人員都應該了解的 10 個進階 TypeScript 概念。

1. 聯合類型

聯合類型允許變數保存多種類型之一，讓您可以靈活地處理不同的資料類型，同時仍保持類型安全。就像擁有多功能工具？ ️可以處理不同的任務。

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";
  }
}

2. 交叉口類型

交集類型將多種類型合併為一種，要求一個變數具有組合類型的所有屬性。

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 類型。這代表了開發人員在組織中的身分和角色。

3. 類型保護

類型保護可以幫助您縮小條件區塊中變數的類型範圍，從而確保類型安全。將他們視為保安保鑣？在夜總會，只讓合適的人進入。

例子

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"

類型保護：因為我們的生活都需要一點安全感。

4. 條件類型

條件類型可讓您根據條件建立類型，提供強大的類型轉換。這就像一本選擇自己的冒險書？ .

例子

type IsString<T> = T extends string ? "Yes" : "No";

type Result1 = IsString<string>; // "Yes"
type Result2 = IsString<number>; // "No"

條件類型非常強大，可讓您根據條件建立動態且靈活的類型。

5. 映射類型

映射類型可讓您透過對每個屬性套用轉換將現有類型轉換為新類型。

例子

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.

6. 模板文字類型

範本文字類型可讓您透過組合字串文字來建立類型，使您的類型定義更具表現力。

例子

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'.

模板文字類型可讓您定義必須遵循亮度-顏色模式的主題類型。這就像為您的類型提供了可供遵循的風格指南。

7. 遞迴類型

遞歸類型是引用自身的類型，可讓您對樹和鍊錶等複雜資料結構進行建模。

例子

為樹結構建立遞歸類型：

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 文件
• TypeScript GitHub 儲存庫

編碼愉快！ ？

以上是每個開發人員都應該了解的高階 TypeScript 概念的詳細內容。更多資訊請關注PHP中文網其他相關文章！