Các loại tiện ích

TypeScript cung cấp một số loại tiện ích toàn cầu để tạo điều kiện thuận lợi cho việc chuyển đổi loại phổ biến. Những kiểu này là chung và cho phép bạn khai báo các kiểu mới từ những kiểu hiện có.

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

1. Partial<T>

Tạo tất cả thuộc tính thuộc loại T tùy chọn. Điều này cực kỳ hữu ích cho các chức năng cập nhật/vá lỗi trong đó người gọi chỉ có thể cung cấp một tập hợp con các trường:

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

// All properties of User become optional: { id?: number; name?: string; email?: string; }
type UserUpdate = Partial<User>;

2. Readonly<T>

Tạo tất cả thuộc tính thuộc loại T chỉ đọc. Mọi nỗ lực gán lại thuộc tính sẽ gây ra lỗi trình biên dịch thời gian biên dịch:

interface Point {
  x: number;
  y: number;
}

const p: Readonly<Point> = { x: 10, y: 20 };
// p.x = 5; // Error: cannot assign to 'x' because it is a read-only property

3. Pick<T, Keys>

Tạo một loại bằng cách chỉ chọn một bộ khóa cụ thể (được biểu thị bằng liên kết chuỗi) từ loại T:

interface Article {
  id: number;
  title: string;
  content: string;
  views: number;
}

// Selects only 'title' and 'views': { title: string; views: number; }
type ArticlePreview = Pick<Article, 'title' | 'views'>;

4. Omit<T, Keys>

Tạo một loại bằng cách xóa một bộ khóa cụ thể khỏi loại T. Nó là số kép của Pick:

interface Product {
  id: number;
  name: string;
  price: number;
  secretVendorCode: string;
}

// Removes 'secretVendorCode': { id: number; name: string; price: number; }
type PublicProduct = Omit<Product, 'secretVendorCode'>;

5. Record<Keys, Type>

Tạo một loại đối tượng có khóa thuộc tính là Keys và có giá trị thuộc tính là Type. Nó cực kỳ hữu ích để ánh xạ các khóa tới các giá trị, biểu diễn từ điển hoặc bảng băm (bản đồ khóa-giá trị):

type Page = 'home' | 'about' | 'contact';

interface PageInfo {
  title: string;
}

// Creates a dictionary with keys 'home' | 'about' | 'contact' and values PageInfo
const nav: Record<Page, PageInfo> = {
  home: { title: 'Home Page' },
  about: { title: 'About Us' },
  contact: { title: 'Contact Us' },
};

Hãy tự mình thử

Bài tập 1: Cập nhật hồ sơ một phần

Bài tập 2: Loại bỏ các trường nhạy cảm bằng Omit

Bài tập 3: Cấu hình công khai với Pick và Readonly

Bài tập 4: Đăng ký người dùng với bản ghi và chỉ đọc