TypeScript Utility Types: Những Types hữu ích trong Typescript

0 0 0

Người đăng: Vũ Nguyễn

Theo Viblo Asia

1. Partial<T>: Biến tất cả thuộc tính của một đối tượng thành optional

Partial<T> là một trong những loại hữu ích nhất khi làm việc với đối tượng. Nó giúp bạn dễ dàng thay đổi tất cả các thuộc tính của một loại đối tượng thành optional.

Ví dụ:

interface User { name: string; age: number;
} const updateUser = (user: Partial<User>) => { // Bạn chỉ cần truyền vào một số thuộc tính của user.
}; updateUser({ name: "John" });

Ở ví dụ trên, bạn có thể gọi updateUser với một phần thông tin của User, thay vì phải truyền vào đầy đủ tất cả thuộc tính.


2. Required<T>: Biến tất cả thuộc tính của một đối tượng thành required

Ngược lại với Partial<T>, Required<T> làm tất cả thuộc tính trong một đối tượng trở thành required.

Ví dụ:

interface User { name: string; age?: number;
} const user: Required<User> = { name: "John", age: 30, // Không thể bỏ qua age nữa
};

Trong ví dụ này, bạn sẽ không thể khởi tạo một đối tượng User mà thiếu age.


3. Pick<T, K>: Chọn một số thuộc tính từ đối tượng

Pick<T, K> giúp bạn tạo một kiểu mới từ một đối tượng đã có, chỉ với các thuộc tính được chỉ định.

Ví dụ:

interface User { name: string; age: number; email: string;
} const contactInfo: Pick<User, "name" | "email"> = { name: "John", email: "john@example.com",
};

Ở đây, Pick giúp bạn chỉ lấy ra các thuộc tính nameemail của User, bỏ qua age.


4. Omit<T, K>: Loại bỏ một số thuộc tính khỏi đối tượng

Omit<T, K> là loại ngược lại của Pick. Nó cho phép bạn tạo một kiểu mới từ một đối tượng, nhưng loại bỏ các thuộc tính bạn không muốn.

Ví dụ:

interface User { name: string; age: number; email: string;
} const userWithoutEmail: Omit<User, "email"> = { name: "John", age: 30,
};

Ở ví dụ trên, Omit giúp bạn tạo ra một đối tượng User mà không có thuộc tính email.


5. Record<K, T>: Tạo đối tượng với key và value có kiểu xác định

Record<K, T> cho phép bạn định nghĩa một đối tượng có các khóa là K và giá trị là T. Loại này rất hữu ích khi bạn cần một đối tượng với các khóa động.

Ví dụ:

type Role = "admin" | "user" | "guest";
const permissions: Record<Role, boolean> = { admin: true, user: false, guest: false,
};

Trong ví dụ trên, Record giúp tạo ra một đối tượng permissions với các khóa là Role và giá trị boolean.


6. Exclude<T, U>: Loại bỏ các giá trị từ một kiểu

Exclude<T, U> giúp bạn tạo một kiểu mới bằng cách loại bỏ các giá trị của U từ T. Loại này rất hữu ích khi bạn cần loại bỏ một số giá trị từ một kiểu hợp nhất (union type).

Ví dụ:

type Fruit = "apple" | "banana" | "orange";
type Citrus = Exclude<Fruit, "banana">;
// Citrus chỉ còn lại "apple" và "orange"

Ở ví dụ trên, Exclude giúp bạn loại bỏ "banana" khỏi kiểu Fruit.


7. NonNullable<T>: Loại bỏ nullundefined

NonNullable<T> giúp loại bỏ các giá trị nullundefined khỏi kiểu T. Đây là một cách tuyệt vời để đảm bảo rằng các giá trị luôn có giá trị hợp lệ.

Ví dụ:

type MyType = string | null | undefined;
type MyNonNullableType = NonNullable<MyType>;
// MyNonNullableType chỉ còn lại string

NonNullable sẽ loại bỏ các giá trị nullundefined từ kiểu MyType.


Tổng kết

Các Utility Types trong TypeScript giúp bạn viết mã sạch hơn, dễ duy trì hơn và tránh được các lỗi không đáng có khi làm việc với kiểu dữ liệu.

  • Partial<T>: Biến tất cả thuộc tính thành optional.
  • Required<T>: Biến tất cả thuộc tính thành required.
  • Pick<T, K>: Lấy một số thuộc tính từ đối tượng.
  • Omit<T, K>: Loại bỏ một số thuộc tính khỏi đối tượng.
  • Record<K, T>: Tạo đối tượng với khóa và giá trị có kiểu xác định.
  • Exclude<T, U>: Loại bỏ các giá trị từ một kiểu.
  • NonNullable<T>: Loại bỏ nullundefined.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 541

- vừa được xem lúc

Type annotation vs Type Inference - Typescript

Trong bài viết này, chúng ta sẽ tìm hiểu kỹ về TypeScript bằng cách tìm hiểu sự khác biệt giữa kiểu chú thích và kiểu suy luận. Tôi sẽ cho rằng bạn có một số kinh nghiệm về JavaScript và biết về các kiểu cơ bản, như chuỗi, số và boolean.

0 0 56

- vừa được xem lúc

Type Annotation và Type Inference trong TypeScript là gì?

Khi làm việc với javascript chắc hẳn các bạn đã quá quen với việc dùng biến mà không cần phải quan tâm đến kiểu dữ liệu của nó là gì phải không? Đúng là mới đầu tiếp cận với Typescript mình cũng cảm thấy nó khá là phiền vì cần phải khai báo đủ type để nó chặt chẽ hơn. Lúc đó mình còn nghĩ: " JavaScr

0 0 42

- vừa được xem lúc

Tìm hiểu TypeScript và kiến thức cơ bản

TypeScript là gì. TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules.

0 0 59

- vừa được xem lúc

TypeScript - P1: Vì sao TypeScript được yêu thích đến vậy?

Trải nghiệm thực tế. Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi.

0 1 74

- vừa được xem lúc

4 Tính năng rất hay từ TypeScript

Xin chào các bạn hôm nay mình xin chia sẽ những tính năng rất hay của TypeScript (TS), các bạn cùng tìm hiểu nhé. Ngoài việc set Type cho biến, tham số hay function thì ví dụ khi bạn nhìn vào một tham

0 0 102