TypeScript Utility Types

Record

Nếu bạn muốn xây dựng một kiểu đối tượng có khóa thuộc tính là keys và giá trị thuộc tính là types thì Record là tiện ích tốt nhật để sử dụng.

Ví dụ

Bạn muốn tạo kiểu đối tượng để thông tin người dùng, bạn có thể xem ví dự bên dưới.

type UserID = string

type UserInfo = {
  name: string;
  email: string;
  avatarUrl: string;
}

const users: Record<UserID, UserInfo> = {
 "uuid1": { "name": "user1", "email": "user1@gmail.com", "avatarUrl": "https://user1.com/avatar.png" },
 "uuid2": { "name": "user2", "email": "user2@gmail.com", "avatarUrl": "https://user2.com/avatar.png" },
 "uuid3": { "name": "user3", "email": "user3@gmail.com", "avatarUrl": "https://user3.com/avatar.png" }

Partial

Partial rất hữu dụng khi bạn muốn các chuyển thuộc tính của đối tượng sang optional.

Ví dụ

Giả sử bạn muốn cập nhật các thuộc tính của người dùng và có sẵn interface với các thuộc tính là require. Nhưng không muốn tạo thêm một interface cho việc cập nhật. Partial  sẽ giúp bạn chuyển đổi các thuộc tính đó.

interface User{
 id:string;
 name: string;
 slug: string;
 group: string[];
 avatarUrl: string;
 about: string;
}

const updateUser: Partial<User> = {
  about: 'I am a software engineer.'
}

Required

Trái ngược với Partial sẽ rất hữu dụng khi bạn muốn sử dụng các thuộc tính có sẵn là required

Ví dụ

Trong một vài trường hợp bạn muốn tất cả các thuộc tính của đối tượng đó là required, bạn có thể xem ví dụ bên dưới.

type User = {
    firstName: string,
    lastName?: string
}

const user1: Required<User> = {
    firstName: "John",
    lastName: "Doe"
}

Omit

Khi bạn muốn tạo một đối tượng bao gồm tất cả trừ một vài field từ 1 type trước đó.

Ví dụ

Giả sử bạn có một đối tượng với các thuộc tính là X, Y, và Z. Nếu bạn muốn tạo một đối tượng mà không có thuộc tính Z.

type Product = {
  X: string;
  Y: string;
  Z: string;
}

type ProductWithoutZ = Omit<Product, "Z">;

Pick

Pick tạo một interface mới chỉ với vài thuộc tính từ một interface có sẵn.

Ví dụ

type ParentType = {
  X: string;
  T: number;
  S: boolean;
}

type ChildType = Pick<ParentType, "X" | "S">

Exclude

Sử dụng Exclude để tạo UnionType mới bằng cách loại bỏ một vài phần tử từ một UnionType đã có sẵn.

Ví dụ

type ReactionUnion = '👍' | '👎' | '😄' |  '🎉' | '😕' | '❤️' | '👀' | '🚀'

// OnlyThumbsUnion  có type là  '👍' | '👎' 
type OnlyThumbsUnion = Exclude<ReactionUnion , '😄' |  '🎉' | '😕' | '❤️' | '👀' | '🚀'>