Nâng cao kỹ năng TypeScript với hệ thống kiểu dữ liệu nâng cao cho ứng dụng chắc chắn hơn

TypeScript từ lâu đã được ưa chuộng nhờ khả năng hỗ trợ kiểu dữ liệu tĩnh giúp giảm lỗi thời gian chạy. Tuy nhiên, nhiều lập trình viên chỉ sử dụng các tính năng cơ bản như interface, extends hay implements mà chưa khai thác hết sức mạnh tiềm ẩn trong hệ thống kiểu dữ liệu của TypeScript.

Bài viết này sẽ giới thiệu và hướng dẫn bạn cách sử dụng các tính năng kiểu nâng cao trong TypeScript như Conditional Types, Template Literal Types, mapped types với as clauses, satisfies operator và branded types giúp tăng cường mức độ an toàn kiểu dữ liệu và loại bỏ nhiều loại lỗi phổ biến một cách hiệu quả.

Conditional Types: Kiểu dữ liệu có khả năng suy luận điều kiện

Conditional Types cho phép bạn gán kiểu theo điều kiện tương tự như toán tử ba ngôi trong JavaScript. Ví dụ, bạn có thể định nghĩa một kiểu kiểm tra xem kiểu T có phải là chuỗi không:

type IsString<T> = T extends string ? true : false;

type Test1 = IsString<'hello'>;   // true
type Test2 = IsString<42>;        // false

Điểm đặc biệt của conditional types là kết hợp với infer giúp trích xuất phần dữ liệu con từ kiểu phức tạp, như kiểu lấy ra kiểu trả về của một hàm:

type ExtractReturnType<T> = T extends (...args: any[]) => infer R ? R : never;

function getUser() {
  return { id: 1, name: 'Alice' };
}

type User = ExtractReturnType<typeof getUser>;
// User = { id: number, name: string }

Hiểu sâu về conditional types giúp bạn tự viết được các tiện ích tương tự ReturnType<T> có sẵn trong thư viện chuẩn.

Template Literal Types: Xử lý chuỗi ngay trên hệ thống kiểu

Ra mắt từ TypeScript 4.1, template literal types mở ra khả năng thao tác và kết hợp chuỗi ngay trong hệ thống kiểu. Điều này rất hữu ích khi bạn xử lý định dạng đường dẫn API, cấu trúc chuỗi có quy tắc như CSS-in-JS hay các chuỗi mẫu.

Ví dụ tạo kiểu cho các endpoint dựa trên phương thức HTTP và phiên bản API:

type HttpMethod = 'GET' | 'POST' | 'PUT' | 'DELETE';
type ApiVersion = 'v1' | 'v2';

type ApiEndpoint = `${HttpMethod} /api/${ApiVersion}/${string}`;

const valid: ApiEndpoint = 'GET /api/v1/users';
const invalid: ApiEndpoint = 'PATCH /api/v3/posts'; // Báo lỗi do "PATCH" và "v3" không hợp lệ

Bạn còn có thể kết hợp với conditional types để biến đổi chuỗi thành các tên hàm getter tự động:

type ToGetter<T extends string> = `get${Capitalize<T>}`;

type Getters = ToGetter<'name' | 'age'>;
// Kết quả: "getName" | "getAge"

Mapped Types với as Clauses: Biến đổi tên thuộc tính kiểu linh hoạt

Mapped Types cho phép tạo kiểu mới từ kiểu cũ bằng cách thao tác trên danh sách thuộc tính. Từ TypeScript 4.1, as clause cung cấp khả năng đổi tên thuộc tính với cú pháp rõ ràng.

Ví dụ tạo hệ thống event handler tự động dựa trên cấu hình người dùng:

type EventHandlers<T> = {
  [K in keyof T as `on${Capitalize<string & K>}Change`]: (value: T[K]) => void;
};

type UserConfig = {
  theme: 'light' | 'dark';
  fontSize: number;
};

type UserEvents = EventHandlers<UserConfig>;
// Kết quả:
// {
//   onThemeChange: (value: 'light' | 'dark') => void;
//   onFontSizeChange: (value: number) => void;
// }

Cách này rất hữu ích trong việc xây dựng các API cấu hình hoặc hệ thống sự kiện an toàn kiểu.

satisfies Operator giúp kiểm tra mà không làm thay đổi kiểu suy luận

Tham gia từ phiên bản TypeScript 4.9, toán tử satisfies cho phép bạn xác nhận một biểu thức có thỏa mãn kiểu yêu cầu mà không làm mất đi kiểu literal ban đầu.

Ví dụ bạn muốn khai báo bảng màu nhưng đồng thời kiểm tra định dạng chuỗi hợp lệ:

const colors = {
  primary: '#ff0000',
  secondary: '#00ff00',
  error: '#ff0000', // Trùng giá trị cũng được phát hiện nếu triển khai thêm
} satisfies Record<string, `#${string}`>;

// colors.primary vẫn giữ kiểu literal '#ff0000', không thành string chung chung

Điều này giúp giữ được đặc tính literal từ chuỗi trong khi vẫn đảm bảo tuân thủ kiểu phức tạp hơn.

Branded Types: Phân biệt các kiểu nguyên thủy cùng loại

Đôi lúc bạn cần phân biệt rõ ràng các loại dữ liệu cùng kiểu nguyên thủy như number nhưng mang ý nghĩa khác nhau, ví dụ UserId và ProductId. Branded Types sử dụng thuộc tính bí mật (symbol) để biến các kiểu nguyên thủy thành các kiểu khác nhau về mặt kiểu học.

declare const brand: unique symbol;

type Brand<T, B> = T & { [brand]: B };

type UserId = Brand<number, 'UserId'>;
type ProductId = Brand<number, 'ProductId'>;

function getProduct(id: ProductId) {
  // xử lý
}

const userId = 123 as UserId;
const productId = 456 as ProductId;

getProduct(productId); // hợp lệ
getProduct(userId);    // lỗi kiểu, không thể dùng thay thế

Kỹ thuật này giúp tránh nhầm lẫn nghiêm trọng trong lúc viết code, đảm bảo an toàn kiểu tốt hơn.

Ví dụ thực tiễn: Xây dựng API Client an toàn kiểu

Tổng hợp các kỹ thuật trên, ta có thể xây dựng một client API với các route và phương thức tự động suy diễn kiểu yêu cầu và kiểu trả về. Điều này giúp khi gọi API bạn nhận được hỗ trợ kiểm tra kiểu sát nhất ngay từ thời điểm biên dịch.

type RouteDefinitions = {
  '/users': {
    GET: { response: User[] };
    POST: { body: CreateUserDto; response: User };
  };
  '/users/:id': {
    GET: { params: { id: string }; response: User };
    PUT: { params: { id: string }; body: UpdateUserDto; response: User };
  };
};

type ApiClient = {
  [Path in keyof RouteDefinitions]: {
    [Method in keyof RouteDefinitions[Path]]: 
      RouteDefinitions[Path][Method] extends { params: infer P, body: infer B }
      ? (params: P, body: B) => Promise<RouteDefinitions[Path][Method]['response']>
      : RouteDefinitions[Path][Method] extends { params: infer P }
      ? (params: P) => Promise<RouteDefinitions[Path][Method]['response']>
      : () => Promise<RouteDefinitions[Path][Method]['response']>
  };
};

const api: ApiClient = {
  '/users': {
    GET: () => fetch('/users').then(r => r.json()),
    POST: (body) => fetch('/users', {
      method: 'POST',
      body: JSON.stringify(body)
    }).then(r => r.json()),
  },
  // Các route khác...
};

// Gọi API với kiểu được đảm bảo:
// users có kiểu User[]
const users = await api['/users'].GET();

// newUser có kiểu User
const newUser = await api['/users'].POST({ name: 'Alice' });

Bước tiếp theo trong hành trình TypeScript của bạn

Các tính năng nâng cao của TypeScript không chỉ là lý thuyết mà là những công cụ cực kỳ thực tiễn giúp bạn bớt lỗi lập trình và tăng năng suất. Hãy bắt đầu thử áp dụng cho một module trong dự án, kết hợp ít nhất hai kỹ thuật trong bài.

Bạn có thể bắt đầu với việc biến tên sự kiện thành an toàn với template literal types hoặc tách rõ loại ID bằng branded types. Thành thạo hệ thống kiểu nâng cao sẽ đưa bạn từ người sử dụng kiểu sang người sáng tạo kiểu, giúp công việc debug code lúc 2 giờ sáng trở nên dễ chịu hơn rất nhiều.

---

Thách thức: Hãy chia sẻ trải nghiệm refactor module, những điều bạn học được và khó khăn gặp phải trong phần bình luận bên dưới bài viết.