M

MLOG

Tiếng Việt

Khám phá discriminated unions trong TypeScript, một công cụ mạnh mẽ để xây dựng máy trạng thái mạnh mẽ và an toàn kiểu. Học cách định nghĩa trạng thái, xử lý chuyển đổi và tận dụng hệ thống kiểu của TypeScript để tăng độ tin cậy của mã.

TypeScript Discriminated Unions: Xây dựng Máy trạng thái an toàn kiểu

Trong lĩnh vực phát triển phần mềm, việc quản lý trạng thái ứng dụng một cách hiệu quả là cực kỳ quan trọng. Máy trạng thái (state machines) cung cấp một cơ chế trừu tượng mạnh mẽ để mô hình hóa các hệ thống có trạng thái phức tạp, đảm bảo hành vi có thể dự đoán được và đơn giản hóa việc lý luận về logic của hệ thống. TypeScript, với hệ thống kiểu mạnh mẽ của mình, cung cấp một cơ chế tuyệt vời để xây dựng các máy trạng thái an toàn kiểu bằng cách sử dụng discriminated unions (còn được gọi là tagged unions hoặc algebraic data types).

Discriminated Unions là gì?

Một discriminated union là một kiểu đại diện cho một giá trị có thể là một trong nhiều kiểu khác nhau. Mỗi kiểu này, được gọi là thành viên của union, chia sẻ một thuộc tính chung, riêng biệt gọi là discriminant hoặc tag. Discriminant này cho phép TypeScript xác định chính xác thành viên nào của union đang hoạt động, từ đó cho phép kiểm tra kiểu mạnh mẽ và tự động hoàn thành mã.

Hãy nghĩ về nó như một cột đèn giao thông. Nó có thể ở một trong ba trạng thái: Đỏ, Vàng, hoặc Xanh. Thuộc tính 'màu' hoạt động như discriminant, cho chúng ta biết chính xác trạng thái của đèn.

Tại sao nên sử dụng Discriminated Unions cho Máy trạng thái?

Discriminated unions mang lại một số lợi ích chính khi xây dựng máy trạng thái trong TypeScript:

Định nghĩa một Máy trạng thái với Discriminated Unions

Hãy cùng minh họa cách định nghĩa một máy trạng thái sử dụng discriminated unions với một ví dụ thực tế: một hệ thống xử lý đơn hàng. Một đơn hàng có thể ở các trạng thái sau: Pending (Chờ xử lý), Processing (Đang xử lý), Shipped (Đã gửi hàng), và Delivered (Đã giao hàng).

Bước 1: Định nghĩa các Kiểu trạng thái

Đầu tiên, chúng ta định nghĩa các kiểu riêng lẻ cho mỗi trạng thái. Mỗi kiểu sẽ có một thuộc tính `type` hoạt động như discriminant, cùng với bất kỳ dữ liệu cụ thể nào của trạng thái đó.


interface Pending {
  type: "pending";
  orderId: string;
  customerName: string;
  items: string[];
}

interface Processing {
  type: "processing";
  orderId: string;
  assignedAgent: string;
}

interface Shipped {
  type: "shipped";
  orderId: string;
  trackingNumber: string;
}

interface Delivered {
  type: "delivered";
  orderId: string;
  deliveryDate: Date;
}

Bước 2: Tạo Kiểu Discriminated Union

Tiếp theo, chúng ta tạo discriminated union bằng cách kết hợp các kiểu riêng lẻ này bằng toán tử `|` (union).


type OrderState = Pending | Processing | Shipped | Delivered;

Bây giờ, `OrderState` đại diện cho một giá trị có thể là `Pending`, `Processing`, `Shipped`, hoặc `Delivered`. Thuộc tính `type` trong mỗi trạng thái hoạt động như discriminant, cho phép TypeScript phân biệt giữa chúng.

Xử lý các Chuyển đổi Trạng thái

Sau khi đã định nghĩa máy trạng thái, chúng ta cần một cơ chế để chuyển đổi giữa các trạng thái. Hãy tạo một hàm `processOrder` nhận trạng thái hiện tại và một hành động (action) làm đầu vào và trả về trạng thái mới.


interface Action {
  type: string;
  payload?: any;
}

function processOrder(state: OrderState, action: Action): OrderState {
  switch (state.type) {
    case "pending":
      if (action.type === "startProcessing") {
        return {
          type: "processing",
          orderId: state.orderId,
          assignedAgent: action.payload.agentId,
        };
      }
      return state; // Không thay đổi trạng thái

    case "processing":
      if (action.type === "shipOrder") {
        return {
          type: "shipped",
          orderId: state.orderId,
          trackingNumber: action.payload.trackingNumber,
        };
      }
      return state; // Không thay đổi trạng thái

    case "shipped":
      if (action.type === "deliverOrder") {
        return {
          type: "delivered",
          orderId: state.orderId,
          deliveryDate: new Date(),
        };
      }
      return state; // Không thay đổi trạng thái

    case "delivered":
      // Đơn hàng đã được giao, không có hành động nào khác
      return state;

    default:
      // Điều này sẽ không bao giờ xảy ra nhờ kiểm tra tính đầy đủ
      return state; // Hoặc ném ra một lỗi
  }
}

Giải thích

Tận dụng Kiểm tra tính đầy đủ

Tính năng kiểm tra tính đầy đủ (exhaustiveness checking) của TypeScript là một tính năng mạnh mẽ đảm bảo bạn xử lý tất cả các trạng thái có thể có trong máy trạng thái của mình. Nếu bạn thêm một trạng thái mới vào union `OrderState` nhưng quên cập nhật hàm `processOrder`, TypeScript sẽ báo lỗi.

Để bật tính năng kiểm tra tính đầy đủ, bạn có thể sử dụng kiểu `never`. Bên trong trường hợp `default` của câu lệnh switch, gán trạng thái cho một biến có kiểu `never`.


function processOrder(state: OrderState, action: Action): OrderState {
  switch (state.type) {
    // ... (các trường hợp trước) ...

    default:
      const _exhaustiveCheck: never = state;
      return _exhaustiveCheck; // Hoặc ném ra một lỗi
  }
}

Nếu câu lệnh `switch` xử lý tất cả các giá trị `OrderState` có thể có, biến `_exhaustiveCheck` sẽ có kiểu `never` và mã sẽ biên dịch thành công. Tuy nhiên, nếu bạn thêm một trạng thái mới vào union `OrderState` và quên xử lý nó trong câu lệnh `switch`, biến `_exhaustiveCheck` sẽ có một kiểu khác, và TypeScript sẽ ném ra một lỗi tại thời điểm biên dịch, cảnh báo bạn về trường hợp còn thiếu.

Ví dụ và Ứng dụng Thực tế

Discriminated unions có thể áp dụng trong nhiều tình huống khác nhau ngoài các hệ thống xử lý đơn hàng đơn giản:

Ví dụ: Quản lý Trạng thái Giao diện người dùng (UI)

Hãy xem xét một ví dụ đơn giản về việc quản lý trạng thái của một thành phần UI lấy dữ liệu từ một API. Chúng ta có thể định nghĩa các trạng thái sau:


interface Initial {
  type: "initial";
}

interface Loading {
  type: "loading";
}

interface Success {
  type: "success";
  data: T;
}

interface Error {
  type: "error";
  message: string;
}

type UIState = Initial | Loading | Success | Error;

function renderUI(state: UIState): React.ReactNode {
  switch (state.type) {
    case "initial":
      return 
Nhấn nút để tải dữ liệu.
;
    case "loading":
      return 
Đang tải...
;
    case "success":
      return 
{JSON.stringify(state.data, null, 2)}
;
    case "error":
      return 
Lỗi: {state.message}
;
    default:
      const _exhaustiveCheck: never = state;
      return _exhaustiveCheck;
  }
}

Ví dụ này minh họa cách discriminated unions có thể được sử dụng để quản lý hiệu quả các trạng thái khác nhau của một thành phần UI, đảm bảo rằng UI được hiển thị chính xác dựa trên trạng thái hiện tại. Hàm `renderUI` xử lý mỗi trạng thái một cách phù hợp, cung cấp một cách rõ ràng và an toàn kiểu để quản lý UI.

Các Thực hành Tốt nhất khi sử dụng Discriminated Unions

Để sử dụng hiệu quả discriminated unions trong các dự án TypeScript của bạn, hãy xem xét các thực hành tốt nhất sau:

Các Kỹ thuật Nâng cao

Conditional Types

Conditional types có thể được kết hợp với discriminated unions để tạo ra các máy trạng thái mạnh mẽ và linh hoạt hơn nữa. Ví dụ, bạn có thể sử dụng conditional types để định nghĩa các kiểu trả về khác nhau cho một hàm dựa trên trạng thái hiện tại.


function getData(state: UIState): T | undefined {
  if (state.type === "success") {
    return state.data;
  }
  return undefined;
}

Hàm này sử dụng một câu lệnh `if` đơn giản nhưng có thể được làm cho mạnh mẽ hơn bằng cách sử dụng conditional types để đảm bảo một kiểu cụ thể luôn được trả về.

Utility Types

Các utility types của TypeScript, như `Extract` và `Omit`, có thể hữu ích khi làm việc với discriminated unions. `Extract` cho phép bạn trích xuất các thành viên cụ thể từ một kiểu union dựa trên một điều kiện, trong khi `Omit` cho phép bạn loại bỏ các thuộc tính khỏi một kiểu.


// Trích xuất trạng thái "success" từ union UIState
type SuccessState = Extract, { type: "success" }>;

// Bỏ thuộc tính 'message' khỏi interface Error
type ErrorWithoutMessage = Omit;

Ví dụ thực tế trong các ngành công nghiệp khác nhau

Sức mạnh của discriminated unions mở rộng ra nhiều ngành công nghiệp và lĩnh vực ứng dụng khác nhau:

Kết luận

Discriminated unions của TypeScript cung cấp một cách mạnh mẽ và an toàn kiểu để xây dựng máy trạng thái. Bằng cách định nghĩa rõ ràng các trạng thái và chuyển đổi có thể xảy ra, bạn có thể tạo ra mã mạnh mẽ, dễ bảo trì và dễ hiểu hơn. Sự kết hợp giữa an toàn kiểu, kiểm tra tính đầy đủ và hoàn thiện mã nâng cao làm cho discriminated unions trở thành một công cụ vô giá cho bất kỳ nhà phát triển TypeScript nào phải đối mặt với việc quản lý trạng thái phức tạp. Hãy áp dụng discriminated unions trong dự án tiếp theo của bạn và tự mình trải nghiệm những lợi ích của việc quản lý trạng thái an toàn kiểu. Như chúng tôi đã trình bày qua các ví dụ đa dạng từ thương mại điện tử đến y tế, và từ logistics đến giáo dục, nguyên tắc quản lý trạng thái an toàn kiểu thông qua discriminated unions có thể áp dụng phổ biến.

Dù bạn đang xây dựng một thành phần UI đơn giản hay một ứng dụng doanh nghiệp phức tạp, discriminated unions có thể giúp bạn quản lý trạng thái hiệu quả hơn và giảm nguy cơ lỗi runtime. Vì vậy, hãy bắt đầu và khám phá thế giới của các máy trạng thái an toàn kiểu với TypeScript!