Giới thiệu về TypeScript Mapped Types

Mapped types trong TypeScript cung cấp một cách để tạo ra các kiểu mới bằng cách chuyển đổi các kiểu hiện có. Chúng là một công cụ mạnh mẽ để xử lý các hoạt động kiểu phức tạp và đảm bảo an toàn kiểu trong các ứng dụng TypeScript. Bài viết này giới thiệu các kiểu được ánh xạ, giải thích cú pháp của chúng và cung cấp các ví dụ để chứng minh cách sử dụng chúng.

Các loại ánh xạ là gì?

Các kiểu được ánh xạ cho phép tạo ra các kiểu mới bằng cách áp dụng phép biến đổi cho từng thuộc tính của một kiểu hiện có. Chúng thường được sử dụng để sửa đổi hoặc mở rộng các kiểu theo cách linh hoạt. Cú pháp cơ bản của một kiểu được ánh xạ là:

type MappedType = {
  [K in keyof T]: NewType;
};

Trong cú pháp này:

• T là kiểu ban đầu.
• K biểu thị mỗi phím trong T.
• NewType là kiểu mới được gán cho từng thuộc tính.

Ví dụ cơ bản về các loại được ánh xạ

Sau đây là một ví dụ đơn giản về kiểu ánh xạ chuyển đổi tất cả các thuộc tính của một kiểu nhất định thành kiểu chỉ đọc:

type ReadOnly = {
  readonly [K in keyof T]: T[K];
};

type User = {
  name: string;
  age: number;
};

type ReadOnlyUser = ReadOnly;

Trong ví dụ này, kiểu ánh xạ ReadOnly chuyển đổi tất cả các thuộc tính của kiểu User thành kiểu chỉ đọc, tạo ra một kiểu mới ReadOnlyUser trong đó tất cả các thuộc tính đều không thể thay đổi.

Các loại được ánh xạ với các chuyển đổi loại

Các kiểu được ánh xạ cũng có thể được sử dụng để chuyển đổi các kiểu theo những cách phức tạp hơn. Ví dụ, một kiểu được ánh xạ làm cho tất cả các thuộc tính trở thành tùy chọn:

type Partial = {
  [K in keyof T]?: T[K];
};

type User = {
  name: string;
  age: number;
};

type PartialUser = Partial;

Trong ví dụ này, kiểu được ánh xạ Partial làm cho tất cả các thuộc tính của kiểu User trở thành tùy chọn, tạo ra một kiểu mới PartialUser trong đó mỗi thuộc tính đều là tùy chọn.

Sử dụng các loại được ánh xạ với các loại có điều kiện

Các kiểu được ánh xạ có thể được kết hợp với các kiểu có điều kiện để có các thao tác kiểu phức tạp hơn. Ví dụ: tạo một kiểu chỉ bao gồm các thuộc tính của một kiểu nhất định:

type OnlyStrings = {
  [K in keyof T]: T[K] extends string ? T[K] : never;
};

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

type StringProperties = OnlyStrings;

Trong ví dụ này, kiểu ánh xạ OnlyStrings lọc ra các thuộc tính không thuộc kiểu string, tạo ra kiểu mới StringProperties chỉ bao gồm các thuộc tính chuỗi từ kiểu User.

Các loại ánh xạ nâng cao

Các trường hợp sử dụng nâng cao cho các kiểu được ánh xạ bao gồm việc tạo các kiểu sửa đổi các kiểu hiện có dựa trên các điều kiện khác nhau. Ví dụ: một kiểu được ánh xạ thêm hậu tố vào mỗi tên thuộc tính:

type WithSuffix<T, S extends string> = {
  [K in keyof T as `${string & K}${S}`]: T[K];
};

type User = {
  name: string;
  age: number;
};

type UserWithSuffix = WithSuffix<User, "Prop">;

Trong ví dụ này, kiểu được ánh xạ WithSuffix sẽ thêm hậu tố vào mỗi tên thuộc tính của kiểu User, tạo ra kiểu mới UserWithSuffix trong đó tên thuộc tính có hậu tố được chỉ định.

Phần kết luận

Mapped types trong TypeScript là một tính năng đa năng cho phép các nhà phát triển tạo ra các kiểu mới bằng cách chuyển đổi các kiểu hiện có. Bằng cách hiểu và sử dụng các kiểu được ánh xạ, các nhà phát triển có thể quản lý các chuyển đổi kiểu phức tạp và đảm bảo tính an toàn của kiểu cao hơn trong mã TypeScript của họ. Mapped types cung cấp các khả năng mạnh mẽ để nâng cao và tùy chỉnh các định nghĩa kiểu trong các ứng dụng TypeScript.