Bài 8. Kiểu nâng cao

Khái niệm và lý thuyết

Thay vì viết lại nhiều kiểu gần giống nhau, ta biến đổi một kiểu gốc. Khi kiểu gốc thay đổi, mọi kiểu dẫn xuất tự cập nhật: đây là nguyên tắc “một nguồn sự thật” (single source of truth) áp dụng cho kiểu.

Các utility type có sẵn như Partial, Pick, Omit, ReturnType đều được xây dựng từ các kỹ thuật trong bài này. Hiểu chúng giúp bạn đọc được thông báo lỗi và định nghĩa kiểu của thư viện.

keyof, typeof, indexed access

const cauHinh = { port: 3000, host: "localhost", debug: true };
type CauHinh = typeof cauHinh;          // lấy kiểu từ giá trị
type Khoa = keyof CauHinh;              // "port" | "host" | "debug"
type KieuPort = CauHinh["port"];        // number

function lay<T, K extends keyof T>(o: T, k: K): T[K] {
  return o[k];
}
lay(cauHinh, "host"); // string

Mapped types

type TuyChon<T> = { [K in keyof T]?: T[K] };          // như Partial
type ChiDoc<T>  = { readonly [K in keyof T]: T[K] };  // như Readonly
type GetterCua<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};
type G = GetterCua<{ ten: string }>; // { getTen: () => string }

Conditional types và infer

type LaMang<T> = T extends unknown[] ? true : false;
type A = LaMang<number[]>; // true

type PhanTu<T> = T extends (infer U)[] ? U : T;
type B = PhanTu<string[]>; // string

type GiaTriPromise<T> = T extends Promise<infer V> ? V : T;
// TS có sẵn Awaited<T> làm việc này

Template literal types

type SuKien = "click" | "focus";
type TenXuLy = `on${Capitalize<SuKien>}`; // "onClick" | "onFocus"
type DuongDan = `/api/${"users" | "posts"}/${number}`;
const u: DuongDan = "/api/users/42";