TypeScript Utility Types: Örneklerle Tam Liste

Utility types, TypeScript'e yerleşik olan ve bir tipi başka bir tipe dönüştüren generic tiplerdir. Her alanı isteğe bağlı ikinci bir User tipi yazmak yerine Partial<User> yazarsınız; üç alanı kopyalamak yerine Pick<User, "id" | "name">. Global oldukları için import gerekmez.

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

User değiştiğinde türetilen dört tip de onu takip eder. TypeScript'in standart kütüphanesi (lib.es5.d.ts) 22 utility type bildirir. Aşağıdaki bölümler hepsini, üzerinde çalıştıkları tip türüne göre gruplanmış olarak ve varsa ayrıntılı sayfanın bağlantısıyla listeler.

Nesne Tipleri: 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>, Partial<T> tipinin tersidir; Partial sayfası ikisini de, bunun gibi bir spread'in içeri aldığı açık undefined dahil, ele alır.

Union Tipleri: 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

Bu üçü nesneler üzerinde değil union'lar üzerinde çalışır. Bir nesne tipi ve onun anahtarlarından bir liste alan Pick ve Omit ile temel fark budur.

Fonksiyon ve Class Tipleri: Parameters, ReturnType ve Dahası

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 gereklidir, çünkü bu utility'ler bir tip alır ve createOrder bir değerdir. Class'lar için de aynısı geçerlidir: typeof Point constructor tipidir, tip olarak yazılan düz Point ise zaten instance tipi anlamına gelir.

NoInfer, bir generic'in tipini nereden alacağını kontrol eder:

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

NoInfer olmasaydı TypeScript C tipini iki argümandan da çıkarır ve "red" | "green" | "blue" olarak genişletirdi; böylece fallback'teki yazım hatası kabul edilirdi.

String Tipleri: Uppercase, Lowercase, Capitalize, Uncapitalize

Bu dördü TypeScript ile yazılmamıştır, derleyicinin içine yerleşiktir ve en çok template literal types içinde işe yarar; örneğin olay işleyici adları için `on${Capitalize<E>}`.

Promise'ler: 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>>, bir async fonksiyonun sonuç tipini ayrıca bildirmeden adlandırmanın standart yoludur.

Utility Type'ları Birleştirmek

Utility type'lar iç içe kullanılabilir. Bazı birleşimler ezbere bilinmeye değecek kadar sık karşınıza çıkar:

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

İç içe bir utility type'ı içten dışa doğru okuyun: Readonly<Pick<Post, "id" | "title">> önce iki özelliği tutar, sonra onları salt okunur yapar. Aynı parçalar yalnızca bazı anahtarları isteğe bağlı yapan bir PartialBy yardımcısı kurar; Partial sayfası onu açıkça yazar.

Utility Type'lar Çalışma Zamanında Hiçbir Şey Yapmaz

Kod derlendiğinde her utility type silinir. Omit<User, "password"> tipindeki bir değer, geldiği nesnede bir password varsa çalışma zamanında onu hâlâ taşıyabilir:

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

Tip yalnızca kodunuzun neyi okuyabileceğini sınırlar. Bir alanı veriden çıkarmak için son satırlardaki gibi destructuring ile ayırın; çalışma zamanında değişikliği durdurmak için Readonly değil Object.freeze kullanın. Yerleşik tipler tek satırlık mapped type ve conditional type'lardır, dolayısıyla aynı araçlarla kendi tiplerinizi de yazabilirsiniz.