Utility Types TypeScript: Daftar Lengkap dan Contohnya

Utility type adalah generic type bawaan TypeScript yang mengubah satu tipe menjadi tipe lain. Alih-alih menulis tipe User kedua dengan semua field opsional, kamu menulis Partial<User>; alih-alih menyalin tiga field, Pick<User, "id" | "name">. Utility type bersifat global, jadi tidak perlu 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

Ketika User berubah, keempat tipe turunannya ikut berubah. Standard library TypeScript (lib.es5.d.ts) mendeklarasikan 22 utility type. Bagian-bagian di bawah ini mendaftar semuanya, dikelompokkan berdasarkan jenis tipe yang diolahnya, dengan link ke halaman detailnya kalau ada.

Object Type: 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> adalah kebalikan dari Partial<T>; halaman Partial membahas keduanya, termasuk undefined eksplisit yang bisa lolos lewat spread seperti ini.

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

Ketiganya bekerja pada union, bukan object. Itulah perbedaan utamanya dengan Pick dan Omit, yang menerima object type dan daftar key-nya.

Tipe Fungsi dan Class: Parameters, ReturnType, dan Lainnya

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 }

typeof createOrder diperlukan karena utility ini menerima tipe, sedangkan createOrder adalah nilai. Hal yang sama berlaku untuk class: typeof Point adalah tipe constructor, sedangkan Point biasa sebagai tipe sudah berarti tipe instance.

NoInfer mengatur dari mana sebuah generic mendapat tipenya:

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");

Tanpa NoInfer, TypeScript akan menyimpulkan C dari kedua argumen dan melebarkannya menjadi "red" | "green" | "blue", sehingga salah ketik di nilai fallback akan diterima.

Tipe String: Uppercase, Lowercase, Capitalize, Uncapitalize

Keempatnya dibangun langsung di dalam compiler, bukan ditulis dengan TypeScript, dan paling berguna di dalam template literal types, seperti `on${Capitalize<E>}` untuk nama event handler.

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>> adalah cara standar untuk menamai tipe hasil sebuah fungsi async tanpa mendeklarasikannya secara terpisah.

Menggabungkan Utility Type

Utility type bisa disusun bersarang. Beberapa kombinasi cukup sering muncul sehingga layak dihafal:

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' }

Baca utility type bersarang dari dalam ke luar: Readonly<Pick<Post, "id" | "title">> pertama-tama mempertahankan dua property, lalu membuatnya read-only. Bagian-bagian yang sama membentuk helper PartialBy yang hanya membuat sebagian key menjadi opsional; halaman Partial menuliskannya secara lengkap.

Utility Type Tidak Melakukan Apa Pun Saat Runtime

Setiap utility type dihapus ketika kode dikompilasi. Nilai bertipe Omit<User, "password"> tetap bisa membawa password saat runtime kalau object asalnya punya password:

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"}

Tipe hanya membatasi apa yang boleh dibaca oleh kodemu. Untuk menghapus sebuah field dari data, buang field itu dengan destructuring seperti di baris-baris terakhir, dan untuk mencegah perubahan saat runtime, pakai Object.freeze, bukan Readonly. Tipe bawaan ini adalah mapped type dan conditional type satu baris, jadi alat yang sama memungkinkanmu menulis utility type sendiri.