Xử lý Giá Trị API Bất Ngờ trong React với TypeScript

Hành Vi Khi API Trả Về Giá Trị Không Có Trong Kiểu Liên Hiệp

📝 Bối Cảnh

Trong lập trình, bạn có thể định nghĩa một kiểu liên hiệp nghiêm ngặt như "admin" | "editor" | "viewer". Nhưng nếu API của bạn trả về "super-admin" thì sao? Nếu không có TypeScript, giao diện người dùng của bạn có thể hoạt động một cách không dự đoán được.

🚨 Không Có TypeScript – Vấn Đề

javascript Copy

// React không có TypeScript
function UserRoleMessage({ role }) {
  switch (role) {
    case "admin":
      return <p>Chào mừng Admin</p>;
    case "editor":
      return <p>Chào mừng Editor</p>;
    case "viewer":
      return <p>Chào mừng Viewer</p>;
    default:
      return <p>Vai trò không xác định</p>;
  }
}

// API gửi nhầm "super-admin"
<UserRoleMessage role="super-admin" />;
// ❌ Người dùng chỉ thấy "Vai trò không xác định"

👉 Vấn Đề

Không có cảnh báo ở thời gian biên dịch. Lỗi này lén lút đi qua cho đến khi chạy chương trình.

✅ Với TypeScript + never – Xử lý API An Toàn Hơn

typescript Copy

type UserRole = "admin" | "editor" | "viewer";

function UserRoleMessage({ role }: { role: UserRole }) {
  switch (role) {
    case "admin":
      return <p>Chào mừng Admin</p>;
    case "editor":
      return <p>Chào mừng Editor</p>;
    case "viewer":
      return <p>Chào mừng Viewer</p>;
    default: {
      // Kiểm tra toàn diện
      const _exhaustive: never = role;
      return _exhaustive;
    }
  }
}

// ✅ Thực hành tốt nhất: xác thực API trước khi gán
function validateRole(role: string): UserRole | null {
  if (role === "admin" || role === "editor" || role === "viewer") {
    return role;
  }
  return null;
}

const apiRole = "super-admin"; // Từ backend
const safeRole = validateRole(apiRole);
<UserRoleMessage role={safeRole ?? "viewer"} />;

🎯 Kết Luận

Không có TypeScript: Giá trị API xấu lặng lẽ phá vỡ giao diện người dùng.
Với TypeScript: Kiểu liên hiệp + never đảm bảo tính toàn diện. Các bộ bảo vệ xác thực bắt những giá trị không hợp lệ tại thời gian chạy.

Thực Hành Tốt Nhất

Luôn xác thực dữ liệu nhận từ API trước khi sử dụng.
Sử dụng kiểu dữ liệu mạnh mẽ trong TypeScript để giảm thiểu lỗi.

Những Cạm Bẫy Thường Gặp

Không kiểm tra dữ liệu trả về từ API, dẫn đến lỗi runtime.
Không sử dụng bộ bảo vệ xác thực khi làm việc với dữ liệu không đáng tin cậy.

Mẹo Tối Ưu Hiệu Suất

Sử dụng các kiểu dữ liệu tốt nhất khi xác thực, như enum, để có thể mở rộng sau này.
Giảm thiểu việc xử lý lỗi bằng cách kiểm tra dữ liệu trước khi hiển thị.

Khắc Phục Vấn Đề

Nếu bạn gặp phải lỗi khi nhận giá trị không hợp lệ từ API, hãy xem xét việc ghi log và thông báo cho người dùng.

Câu Hỏi Thường Gặp

1. Làm thế nào để xác thực dữ liệu API trong TypeScript?
Bạn có thể sử dụng các hàm kiểm tra để đảm bảo giá trị nhận được từ API là hợp lệ trước khi sử dụng.

2. Tại sao TypeScript lại quan trọng trong dự án React?
TypeScript giúp phát hiện lỗi sớm, cải thiện khả năng bảo trì và làm cho mã nguồn dễ đọc hơn.

Hãy bắt đầu sử dụng TypeScript ngay hôm nay để bảo vệ ứng dụng của bạn khỏi những giá trị không mong muốn từ API!