阿川私房教材：學程式，拿 offer！

63 個專案實戰，直接上手！
無需補習，按步驟打造你的面試作品。

小編精選 - 技術文章翻譯 · 12月20日

進階 TypeScript 技巧

TypeScript 已成為建立可擴展、可維護和高效應用程式的首選工具。它的類型系統不僅強大而且用途廣泛，為追求卓越的開發人員提供了先進的工具。這份綜合指南揭示了 TypeScript 最強大的功能、最佳實踐和實際用例，為專業人士提供一體化參考。

掌握 TypeScript 的高階類型系統

TypeScript 的類型系統超越了基本類型，可以創造性地解決問題。

1.1 條件類型

條件類型允許類型定義中的類型邏輯。

type StatusCode<T> = T extends "success" ? 200 : 400;
type Result = StatusCode<"success">; // 200

使用案例：

建立具有精細響應的 API。
動態型別推斷。

1.2 實用程式類型

TypeScript 的內建實用程式類型簡化了許多複雜的場景：

Partial<T> ：讓所有屬性可選。

Readonly<T> ：使所有屬性不可變。

Pick<T, K> ：從類型中提取特定屬性。

例子：

建立類型安全的配置管理器。

type Config<T> = Readonly<Partial<T>>;
interface AppSettings { darkMode: boolean; version: string; }
const appConfig: Config<AppSettings> = { version: "1.0" };

1.3 映射類型

映射類型允許對現有類型進行轉換。

type Optional<T> = { [K in keyof T]?: T[K] };
interface User { name: string; age: number; }
type OptionalUser = Optional<User>; // { name?: string; age?: number; }

為什麼使用映射類型？

非常適合需要部分更新或修補的 API。
確保程式碼一致性。

1.4 模板文字類型

將字串操作與動態場景的類型結合。

type Endpoint = `api/${string}`;
const userEndpoint: Endpoint = "api/users";

應用：

為 REST API 建立動態 URL。
描述性類型具有更好的可維護性。

泛型的用途

泛型提供了靈活性，支援可重複使用和類型安全的程式碼。

2.1 遞歸泛型

非常適合表示 JSON 等深度嵌套資料。

type JSONData = string | number | boolean | JSONData[] | { [key: string]: JSONData };

2.2 高階約束

泛型可以對其使用強制執行規則。

function merge<T extends object, U extends object>(obj1: T, obj2: U): T & U {
  return { ...obj1, ...obj2 };
}
const merged = merge({ name: "Alice" }, { age: 30 });

函數式和物件導向的 TypeScript

3.1 類型保護

類型防護允許在執行時進行動態類型細化。

function isString(value: unknown): value is string {
  return typeof value === "string";
}

為什麼它很重要：

防止執行時錯誤。
簡化聯合類型的使用。

3.2 裝飾器

裝飾器增強了元編程能力。

function Log(target: any, key: string, descriptor: PropertyDescriptor) {
  const original = descriptor.value;
  descriptor.value = function (...args: any[]) {
    console.log(`Method ${key} called with arguments: ${args}`);
    return original.apply(this, args);
  };
}
class Greeter {
  @Log
  greet(name: string) {
    return `Hello, ${name}`;
  }
}

使用案例：

日誌記錄、快取、驗證或元資料標記。
常見於 Angular 和 NestJS 等框架。

效能優化

TypeScript 可以透過強制執行高效能模式來幫助維持效能：

4.1 嚴格模式

啟用strict模式可確保更好的類型安全。

{
  "compilerOptions": {
    "strict": true
  }
}

4.2 樹抖動

消除未使用的程式碼以優化套件大小，尤其是在使用庫時。

將 TypeScript 與現代技術集成

5.1 圖形語言

TypeScript 與 GraphQL 無縫集成，以實現端到端類型安全性。

type Query = { user: (id: string) => User };

5.2 網路彙編

TypeScript 可以與 WebAssembly 互通來執行效能密集型任務，使其適合即時應用程式。

測試與除錯

TypeScript 使用 Jest 等框架簡化了測試。

describe("MathUtils", () => {
  it("should add numbers", () => {
    expect(add(2, 3)).toBe(5);
  });
});

7.TypeScript 中的設計模式

7.1 單例模式

在 TypeScript 中，單例模式確保一個類別只有一個實例，並提供對其的全域存取點。

class Singleton {
  private static instance: Singleton;
  private constructor() {}
  static getInstance(): Singleton {
    if (!this.instance) this.instance = new Singleton();
    return this.instance;
  }
}

7.2 觀察者模式

在 TypeScript 中，觀察者模式定義了物件之間的一對多依賴關係，其中當一個物件更改狀態時，其所有依賴項都會收到通知並自動更新。

class Subject {
  private observers: Function[] = [];
  subscribe(fn: Function) {
    this.observers.push(fn);
  }
  notify(data: any) {
    this.observers.forEach(fn => fn(data));
  }
}