Bạn đã làm quen với các cơ bản của TypeScript, nhưng làm thế nào để tận dụng sức mạnh của nó cho các hệ thống lớn và phức tạp? Dưới đây là 3 patterns nâng cao giúp code của bạn "sạch" và an toàn hơn.

1. Discriminated Unions (Tagged Unions)

Thay vì dùng any hoặc các interface lỏng lẻo, hãy dùng Discriminated Unions để mô hình hóa các trạng thái của ứng dụng một cách chính xác.

1type LoadingState = { status: 'loading' };
2type SuccessState = { status: 'success'; data: User[] };
3type ErrorState = { status: 'error'; error: Error };
4
5type RequestState = LoadingState | SuccessState | ErrorState;
6
7function handleState(state: RequestState) {
8  switch (state.status) {
9    case 'loading':
10      return 'Loading...';
11    case 'success':
12      return `Loaded ${state.data.length} users`;
13    case 'error':
14      return `Error: ${state.error.message}`;
15    // TypeScript sẽ báo lỗi nếu bạn quên handle một case nào đó (exhaustiveness checking)
16  }
17}

Tại sao nó tốt?

  • Loại bỏ hoàn toàn việc check null hoặc undefined không cần thiết.
  • Tự động gợi ý code (intellisense) chính xác cho từng case.

2. Opaque Types (Branded Types)

Bạn có bao giờ nhầm lẫn giữa UserId và PostId vì cả hai đều là string? Opaque Types giúp bạn "đánh dấu" các kiểu dữ liệu nguyên thủy để tránh nhầm lẫn.

1type UserId = string & { __brand: "UserId" };
2type PostId = string & { __brand: "PostId" };
3
4function getPost(id: PostId) { /* ... */ }
5
6const userId = "user_123" as UserId;
7const postId = "post_456" as PostId;
8
9getPost(postId); // OK
10getPost(userId); // Error: Argument of type 'UserId' is not assignable to parameter of type 'PostId'.

Tại sao nó tốt?

  • Type safety tuyệt đối cho các ID hoặc các giá trị primitive có ý nghĩa domain khác nhau.

3. Dependency Injection với Interface

Để code dễ test và lỏng lẻo (loose coupling), hãy luôn phụ thuộc vào Interface, không phải Class cụ thể.

1interface ILogger {
2  log(message: string): void;
3}
4
5class ConsoleLogger implements ILogger {
6  log(message: string) { console.log(message); }
7}
8
9class UserService {
10  constructor(private logger: ILogger) {}
11
12  createUser(name: string) {
13    this.logger.log(`Created user ${name}`);
14  }
15}
16
17// Khi test, bạn có thể dễ dàng mock logger
18const mockLogger = { log: jest.fn() };
19const service = new UserService(mockLogger);

Tại sao nó tốt?

  • Dễ dàng thay thế implementation (ví dụ: chuyển từ ConsoleLogger sang FileLogger mà không sửa code UserService).
  • Unit test dễ dàng hơn bao giờ hết.

Kết luận

TypeScript không chỉ là về việc thêm type cho biến. Nó là công cụ mạnh mẽ để thiết kế hệ thống. Hãy thử áp dụng các pattern này vào dự án tiếp theo của bạn nhé!

Happy coding!

@hyulevo653