Giới thiệu

TypeScript cung cấp nhiều loại tiện ích giúp bạn giảm thiểu mã lặp khi làm việc với các kiểu đối tượng. Hai trong số những tiện ích hữu ích nhất là Pick và Partial. Trong bài viết này, chúng ta sẽ phân tích chi tiết về hai tiện ích này với các ví dụ thực tế.

Bắt đầu: Giao diện User

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

Giao diện trên mô tả một đối tượng User điển hình với tất cả các trường bắt buộc.

Pick<T, K> – Chọn các thuộc tính cụ thể

Pick tạo ra một kiểu mới bằng cách chọn một tập hợp con các thuộc tính từ một kiểu khác.

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

Ở đây:

• T là kiểu nguồn (User).
• K là một tập hợp các khóa thuộc tính mà chúng ta muốn ("age" | "name" | "email").

Kết quả là UpdateProps tương đương với:

type UpdateProps = {
  age: number;
  name: string;
  email: string;
};

Điều này rất hữu ích khi bạn chỉ cần một vài trường cho một thao tác cập nhật người dùng thay vì toàn bộ đối tượng người dùng.

Partial<T> – Biến các thuộc tính thành tùy chọn

Partial tạo ra một kiểu mới mà tất cả các thuộc tính đều là tùy chọn.

type UpdatedUserOptional = Partial<UpdateProps>;

Bây giờ, mọi thuộc tính trong UpdateProps—age, name, và email—đều trở thành tùy chọn:

type UpdatedUserOptional = {
  age?: number;
  name?: string;
  email?: string;
};

Điều này rất tiện lợi cho các API cập nhật, nơi mà một client có thể chỉ gửi những trường mà họ muốn thay đổi.

Kết hợp lại

Dưới đây là một hàm cập nhật người dùng:

function updateUser(updatedProps: UpdatedUserOptional) {
  // Thực hiện cập nhật vào cơ sở dữ liệu với chỉ các trường đã cung cấp
}

Các điểm chính:

• Bạn không cần phải truyền tất cả ba thuộc tính.
• TypeScript vẫn đảm bảo rằng nếu một thuộc tính được cung cấp, nó phải khớp với kiểu chính xác (ví dụ: string cho name, number cho age, v.v.).

Ví dụ sử dụng:

updateUser({ name: "Alice" });         // ✅ Chỉ cần name
updateUser({ email: "a@b.com", age: 30 }); // ✅ Name là tùy chọn

Tại sao điều này quan trọng

Việc sử dụng Pick và Partial cùng nhau:

• Giảm thiểu sự trùng lặp (không cần viết lại kiểu thuộc tính).
• Giữ cho các kiểu đồng bộ với giao diện nguồn của bạn.
• Cung cấp cho bạn các mẫu cập nhật linh hoạt nhưng vẫn an toàn về kiểu.

Thực hành tốt nhất

• Sử dụng Pick khi bạn chỉ cần một số thuộc tính cụ thể từ một kiểu lớn hơn.
• Sử dụng Partial khi bạn muốn cho phép người dùng chỉ cập nhật một số trường nhất định mà không cần phải cung cấp tất cả.

Những cạm bẫy thường gặp

• Không hiểu rõ cách hoạt động của Pick và Partial có thể dẫn đến những lỗi khó phát hiện trong mã.
• Đảm bảo rằng bạn kiểm tra các thuộc tính tùy chọn để tránh lỗi trong quá trình chạy.

Mẹo tối ưu hóa hiệu suất

• Sử dụng Pick và Partial giúp giảm lượng mã lặp lại, từ đó cải thiện khả năng bảo trì mã.
• Sử dụng trong các API để giảm bớt khối lượng dữ liệu được gửi qua mạng.

Giải quyết sự cố

• Nếu bạn gặp lỗi kiểu khi sử dụng Pick hoặc Partial, hãy kiểm tra lại các khóa thuộc tính để đảm bảo chúng tồn tại trong kiểu gốc.

Câu hỏi thường gặp (FAQ)

1. Pick và Partial có thể được sử dụng đồng thời không?

Có, bạn có thể sử dụng cả hai để tạo ra các kiểu tùy chỉnh cho các trường hợp sử dụng khác nhau.

2. Có những tiện ích nào khác trong TypeScript không?

Có nhiều tiện ích khác như Record, Omit, và Required giúp bạn quản lý các kiểu một cách linh hoạt hơn.

Kết luận

Việc hiểu và sử dụng đúng các tiện ích như Pick và Partial trong TypeScript không chỉ giúp bạn viết mã sạch hơn mà còn tiết kiệm thời gian trong quá trình phát triển. Hãy áp dụng chúng vào dự án của bạn ngay hôm nay để thấy sự khác biệt!

Liên hệ với chúng tôi nếu bạn cần thêm thông tin hoặc hỗ trợ về TypeScript!