Cách tạo và sử dụng các loại tiện ích TypeScript

TypeScript cung cấp một tập hợp các utility types ​​giúp chuyển đổi và quản lý các loại hiện có dễ dàng hơn. Các loại tiện ích tích hợp này cho phép các nhà phát triển thao tác các loại theo nhiều cách khác nhau, giúp đơn giản hóa mã và tránh lặp lại. Hướng dẫn này khám phá một số loại tiện ích phổ biến nhất và cách chúng có thể được tạo và sử dụng trong một dự án TypeScript.

Các loại tiện ích TypeScript là gì?

Các kiểu tiện ích trong TypeScript là các kiểu được xác định trước giúp chuyển đổi các kiểu khác. Chúng có thể được sử dụng để tạo các kiểu mới dựa trên các kiểu hiện có bằng cách chọn, bỏ qua hoặc sửa đổi các thuộc tính. Chúng đóng vai trò thiết yếu trong việc duy trì mã sạch, có thể tái sử dụng.

Các loại tiện ích TypeScript thường dùng

Sau đây là một số loại tiện ích TypeScript được sử dụng phổ biến nhất:

• Partial<T> – Làm cho tất cả các thuộc tính kiểu T trở thành tùy chọn.
• Bắt buộc<T> – Bắt buộc tất cả các thuộc tính loại T.
• Readonly<T> – Biến tất cả các thuộc tính kiểu T thành chỉ đọc.
• Pick<T, K> – Chọn một tập hợp các thuộc tính K từ kiểu T.
• Omit<T, K> – Xóa một tập hợp các thuộc tính K khỏi kiểu T.
• Record<K, T> – Xây dựng một kiểu đối tượng với các khóa kiểu K và các giá trị kiểu T.

Ví dụ: Sử dụng Partial<T>

Kiểu tiện ích Partial làm cho tất cả các thuộc tính của giao diện trở thành tùy chọn. Sau đây là cách sử dụng:

interface User {
  name: string;
  age: number;
  email: string;
}

const updateUser = (user: Partial<User>) => {
  // Update logic
};

updateUser({ name: "John" });

Trong ví dụ này, updateUser chấp nhận đối số kiểu Partial<User>, nghĩa là chỉ một số thuộc tính của giao diện User là bắt buộc.

Ví dụ: Sử dụng Pick<T, K>

Tiện ích Pick cho phép chọn một tập hợp con các thuộc tính từ một loại:

interface User {
  name: string;
  age: number;
  email: string;
}

type UserContactInfo = Pick<User, "name" | "email">;

const contactInfo: UserContactInfo = {
  name: "John",
  email: "[email protected]"
};

Tại đây, Pick<User, “name” | “email”> tạo ra một kiểu mới UserContactInfo chỉ có các thuộc tính name và email từ giao diện User ban đầu.

Ví dụ: Sử dụng Omit<T, K>

Tiện ích Omit loại bỏ các thuộc tính được chỉ định khỏi một kiểu:

interface User {
  name: string;
  age: number;
  email: string;
}

type UserWithoutEmail = Omit<User, "email">;

const user: UserWithoutEmail = {
  name: "John",
  age: 30
};

Trong ví dụ này, kiểu UserWithoutEmail được tạo bằng cách bỏ thuộc tính email khỏi giao diện User.

Tạo các loại tiện ích tùy chỉnh

Các kiểu tiện ích tùy chỉnh cũng có thể được tạo bằng các tính năng kiểu nâng cao của TypeScript như kiểu có điều kiện, kiểu được ánh xạ, v.v. Sau đây là một ví dụ đơn giản về kiểu tiện ích tùy chỉnh khiến tất cả các thuộc tính trở thành tùy chọn:

type MyPartial<T> = {
  [P in keyof T]?: T[P];
};

interface User {
  name: string;
  age: number;
  email: string;
}

const user: MyPartial<User> = {
  name: "Alice"
};

Kiểu MyPartial tùy chỉnh này có chức năng tương tự như kiểu tiện ích Partial tích hợp sẵn của TypeScript.

Phần kết luận

Các kiểu tiện ích TypeScript là một tính năng thiết yếu để làm việc với các kiểu theo cách linh hoạt và có thể tái sử dụng. Bằng cách tận dụng các kiểu tiện ích này, mã có thể được làm ngắn gọn hơn và dễ bảo trì hơn. Cho dù sử dụng các kiểu tiện ích tích hợp như Partial, Pick và Omit hay tạo các kiểu tùy chỉnh, chúng đều cải thiện đáng kể hệ thống kiểu của TypeScript.