Utility type trong TypeScript: danh sách đầy đủ và ví dụ

Utility type là các kiểu generic có sẵn trong TypeScript, dùng để biến một kiểu thành kiểu khác. Thay vì viết một kiểu User thứ hai với mọi trường đều tùy chọn, bạn viết Partial<User>; thay vì sao chép ba trường, bạn viết Pick<User, "id" | "name">. Chúng là kiểu toàn cục nên không cần import.

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

type UserPatch = Partial<User>;                 // every field optional
type UserCard = Pick<User, "id" | "name">;      // only id and name
type PublicUser = Omit<User, "password">;       // everything but password
type UsersById = Record<number, PublicUser>;    // an object keyed by id

const patch: UserPatch = { email: "new@example.com" };
const card: UserCard = { id: 1, name: "Ada" };
const users: UsersById = {
  1: { id: 1, name: "Ada", email: "ada@example.com" },
};

console.log(patch, card, users[1].email);
// { email: 'new@example.com' } { id: 1, name: 'Ada' } ada@example.com

Khi User thay đổi, cả bốn kiểu dẫn xuất đều thay đổi theo. Thư viện chuẩn của TypeScript (lib.es5.d.ts) khai báo 22 utility type. Các phần bên dưới liệt kê tất cả, xếp nhóm theo loại kiểu mà chúng xử lý, kèm liên kết đến trang chi tiết nếu có.

Kiểu đối tượng: Partial, Required, Readonly, Pick, Omit, Record

interface Config {
  host: string;
  port?: number;
  debug?: boolean;
}

const defaults: Required<Omit<Config, "host">> = { port: 8080, debug: false };

function withDefaults(config: Config): Readonly<Required<Config>> {
  return { ...defaults, ...config };
}

const cfg = withDefaults({ host: "localhost", debug: true });
console.log(cfg); // { port: 8080, debug: true, host: 'localhost' }
// cfg.port = 1 would be error TS2540: Cannot assign to 'port' because it is a read-only property.

Required<T> là kiểu ngược lại của Partial<T>; trang Partial nói về cả hai, kể cả giá trị undefined tường minh mà một phép spread như trên để lọt qua.

Union type: Exclude, Extract, NonNullable

type Status = "draft" | "review" | "published" | "archived";

type Live = Exclude<Status, "draft" | "archived">; // "review" | "published"
type Mixed = string | number | (() => void);
type Callable = Extract<Mixed, (...args: never[]) => unknown>; // () => void

function lookup(id: number): string | undefined {
  return id === 1 ? "Ada" : undefined;
}
type Found = NonNullable<ReturnType<typeof lookup>>; // string

const s: Live = "review";
const run: Callable = () => console.log("called");
const found: Found = lookup(1) ?? "nobody";
run();
console.log(s, found); // review Ada

Ba kiểu này làm việc trên union, không phải đối tượng. Đó là khác biệt then chốt so với Pick và Omit, vốn nhận một kiểu đối tượng và một danh sách khóa của nó.

Kiểu hàm và lớp: Parameters, ReturnType và các kiểu khác

function createOrder(customer: string, items: string[], express = false) {
  return { customer, items, express, total: items.length * 10 };
}

type OrderArgs = Parameters<typeof createOrder>; // [customer: string, items: string[], express?: boolean | undefined]
type Order = ReturnType<typeof createOrder>;     // { customer: string; items: string[]; express: boolean; total: number }

const args: OrderArgs = ["Ada", ["book", "pen"]];
const order: Order = createOrder(...args);
console.log(order.total, order.express); // 20 false

class Point {
  constructor(public x: number, public y: number) {}
}
const coords: ConstructorParameters<typeof Point> = [3, 4];
const p: InstanceType<typeof Point> = new Point(...coords);
console.log(p); // Point { x: 3, y: 4 }

Cần có typeof createOrder vì các tiện ích này nhận vào một kiểu, còn createOrder là một giá trị. Lớp cũng vậy: typeof Point là kiểu của hàm khởi tạo, còn Point dùng làm kiểu thì đã mang nghĩa kiểu instance.

NoInfer điều khiển nơi một generic lấy kiểu của nó:

function pickColor<C extends string>(colors: C[], fallback: NoInfer<C>): C {
  return colors[0] ?? fallback;
}

console.log(pickColor(["red", "green"], "green")); // red
// @ts-expect-error: "blue" is not "red" | "green"
pickColor(["red", "green"], "blue");

Không có NoInfer, TypeScript sẽ suy luận C từ cả hai đối số và mở rộng nó thành "red" | "green" | "blue", nên lỗi gõ sai trong giá trị dự phòng sẽ được chấp nhận.

Kiểu chuỗi: Uppercase, Lowercase, Capitalize, Uncapitalize

Bốn kiểu này được tích hợp sẵn trong trình biên dịch chứ không được viết bằng TypeScript, và chúng hữu ích nhất bên trong template literal type, ví dụ `on${Capitalize<E>}` cho tên trình xử lý sự kiện.

Promise: Awaited

async function fetchUser(id: number) {
  return { id, name: "Ada" };
}

type Pending = ReturnType<typeof fetchUser>;           // Promise<{ id: number; name: string }>
type User = Awaited<ReturnType<typeof fetchUser>>;      // { id: number; name: string }

async function main() {
  const user: User = await fetchUser(1);
  const all: User[] = await Promise.all([fetchUser(2), fetchUser(3)]);
  console.log(user.name, all.map((u) => u.id)); // Ada [ 2, 3 ]
}
main();

Awaited<ReturnType<typeof fn>> là cách chuẩn để đặt tên cho kiểu kết quả của một hàm async mà không cần khai báo riêng.

Kết hợp các utility type

Utility type có thể lồng nhau. Một vài cách kết hợp xuất hiện đủ thường xuyên để bạn nên nhớ:

interface Post {
  id: number;
  title: string;
  body: string;
  tags: string[];
}

// Create: everything except the server-generated id
type NewPost = Omit<Post, "id">;
// Update: id required, everything else optional
type PostUpdate = Pick<Post, "id"> & Partial<Omit<Post, "id">>;
// A lookup table of read-only summaries
type PostIndex = Record<number, Readonly<Pick<Post, "id" | "title">>>;

const created: NewPost = { title: "Hello", body: "...", tags: [] };
const update: PostUpdate = { id: 1, title: "Hello again" };
const index: PostIndex = { 2: { id: 2, title: "Idea" } };
console.log(created.title, update, index[2]);
// Hello { id: 1, title: 'Hello again' } { id: 2, title: 'Idea' }

Hãy đọc một utility type lồng nhau từ trong ra ngoài: Readonly<Pick<Post, "id" | "title">> trước tiên giữ lại hai thuộc tính, rồi biến chúng thành chỉ đọc. Cũng với các thành phần đó, bạn có thể dựng một helper PartialBy chỉ biến một số khóa thành tùy chọn; trang Partial viết đầy đủ helper này.

Utility type không làm gì lúc chạy

Mọi utility type đều bị xóa khi code được biên dịch. Một giá trị có kiểu Omit<User, "password"> vẫn có thể mang password lúc chạy nếu đối tượng gốc của nó có:

interface User {
  name: string;
  password: string;
}

const full: User = { name: "Ada", password: "hunter2" };

const leaky: Omit<User, "password"> = full; // allowed: extra properties are fine
console.log(JSON.stringify(leaky)); // {"name":"Ada","password":"hunter2"}

const { password, ...safe } = full;          // this actually removes it
console.log(JSON.stringify(safe));  // {"name":"Ada"}

Kiểu chỉ giới hạn những gì code của bạn được phép đọc. Để xóa một trường khỏi dữ liệu, hãy dùng destructuring để tách nó ra như ở các dòng cuối, và để ngăn thay đổi lúc chạy, hãy dùng Object.freeze chứ không phải Readonly. Các kiểu có sẵn đều là mapped type và conditional type viết trên một dòng, nên bạn có thể dùng chính những công cụ đó để tự viết utility type của mình.