Mapped & template literal types

Mapped type cho phép DUYỆT qua mọi khoá của một kiểu rồi sinh ra kiểu mới. Cú pháp [K in keyof T] đọc là "với mỗi khoá K của T". Dạng đơn giản nhất chỉ sao chép lại:

interface Meo { ten: string; tuoi: number; }

type Sao<T> = { [K in keyof T]: T[K] };
// Sao<Meo> = { ten: string; tuoi: number }  (ban sao y het)

type ChiDoc<T> = { readonly [K in keyof T]: T[K] };
// ChiDoc<Meo> = { readonly ten: string; readonly tuoi: number }

Bấm thử các mapped type áp lên cùng một kiểu Meo:

{
  ten: string;
  tuoi: number;
}

• ▸keyof T cho union các khoá của T; [K in keyof T] duyệt từng khoá đó.
• ▸T[K] là kiểu của field K (indexed access), dùng để giữ hoặc đổi kiểu giá trị.
• ▸Mapped type sinh một kiểu MỚI từ kiểu cũ, không sửa kiểu cũ.

Trong lúc map, bạn gắn thêm readonly hay ? cho mọi field - hoặc GỠ chúng bằng dấu -:

type CoCung<T> = { [K in keyof T]?: T[K] };
// CoCung<Meo> = { ten?: string; tuoi?: number }  (moi field optional)

type GoReadonly<T> = { -readonly [K in keyof T]: T[K] };  // BO readonly
type BatBuoc<T>    = { [K in keyof T]-?: T[K] };          // BO ? (bat buoc lai)

• ▸readonly [K in keyof T] thêm readonly; [K in keyof T]? thêm optional cho mọi field.
• ▸Dấu - gỡ modifier: -readonly bỏ readonly, -? làm field bắt buộc trở lại.
• ▸Đây chính là cách Readonly<T> và Partial<T> có sẵn được dựng nên.

Template literal type dùng đúng cú pháp dấu huyền như template string, nhưng chạy trên KIỂU: nó ghép các literal thành literal mới. Kèm các kiểu thao tác chuỗi có sẵn như Capitalize:

type Handler = `on${Capitalize<"click">}`;
// Handler = "onClick"

type SuKien = "click" | "hover";
type Handlers = `on${Capitalize<SuKien>}`;
// Handlers = "onClick" | "onHover"  (phan phoi tren union)

Ghép mapped type với template literal qua mệnh đề as, ta đổi tên khoá trong lúc map. Ví dụ kinh điển: sinh ra một getter cho mỗi field:

type Getters<T> = {
  [K in keyof T as `get${Capitalize<K & string>}`]: () => T[K];
};
// Getters<Meo> = {
//   getTen: () => string;
//   getTuoi: () => number;
// }

• ▸[K in keyof T as TenMoi] đổi tên khoá K thành TenMoi trong lúc map.
• ▸Ghép với template literal để sinh tên theo mẫu: getTen, getTuoi...
• ▸Map một khoá sang never thì khoá đó bị loại - cách lọc bớt field.

Mapped type duyệt và biến đổi từng khoá; template literal type ghép tên ở tầng kiểu; key remapping đổi tên khoá. Cùng với conditional và infer, đây là bộ đồ nghề đầy đủ để SINH kiểu từ kiểu. Bài sau cho thấy thư viện chuẩn dùng chính bộ đồ nghề này.