Utility types

Neden Tip Türetmek

Mağazada bir Product tipiniz var. Ürün güncelleme formu için "aynı alanlar ama hepsi opsiyonel", sepet için "ürünün birkaç alanı artı adet" gibi tiplere ihtiyacınız olacak. Bunları elle yeniden yazarsanız Product'a bir alan eklediğinizde diğerlerini güncellemeyi unutursunuz.

Çözüm, tipleri tek bir kaynaktan türetmektir. TypeScript, mevcut bir tipten ya da değerden yeni tip üreten operatörler ve hazır utility type'lar sunar.¹² Bu derste hepsi şu tip üzerinden ilerliyor:

const categories = ["electronics", "books", "home"] as const;
type Category = (typeof categories)[number]; // "electronics" | "books" | "home"

type Product = {
  id: number;
  name: string;
  price: number;
  category: Category;
  description: string;
};

İlk iki satırı aşağıda adım adım açıyoruz.

keyof, typeof ve Indexed Access

keyof

keyof, bir object tipinin anahtarlarını string literal union'ı olarak verir:³

type ProductKey = keyof Product; // "id" | "name" | "price" | "category" | "description"

const key: ProductKey = "nmae";
// Hata: Type '"nmae"' is not assignable to type 'keyof Product'.

Parametresi keyof Product olan bir sortBy(products, key) fonksiyonu artık yalnızca gerçekten var olan alan adlarını kabul eder.

typeof (tip konumunda)

JavaScript'teki typeof çalışma zamanında bir string döner. TypeScript, tip konumunda yazılan typeof'a ikinci bir anlam verir: bir değişkenin tipini alır.⁴ Böylece tipi değerden üretirsiniz:

const defaultFilters = {
  category: "electronics",
  maxPrice: 5000,
  inStockOnly: true,
};

type Filters = typeof defaultFilters;
// { category: string; maxPrice: number; inStockOnly: boolean }

typeof yalnızca değişken adlarıyla ve onların alanlarıyla çalışır; içine bir fonksiyon çağrısı yazamazsınız.⁴

Indexed access

Product["price"], bir alanın tipini okur. Köşeli parantez içine bir union da yazabilirsiniz:⁵

type Price = Product["price"]; // number
type NameOrPrice = Product["name" | "price"]; // string | number

Dizilerde index olarak number yazmak, eleman tipini verir. Dersin başındaki satır bu üç parçanın birleşimidir: as const dizinin elemanlarını literal tipler olarak sabitler, typeof dizinin tipini alır, [number] de elemanlarının union'ını çıkarır.⁵²

const categories = ["electronics", "books", "home"] as const;
type Category = (typeof categories)[number];

Diziye yeni bir kategori eklediğinizde Category tipi kendiliğinden güncellenir; aynı dizi bir <select>'in seçeneklerini üretmek için çalışma zamanında da kullanılır.

Hazır Utility Tipler

TypeScript'in global olarak sunduğu, en sık kullanılan utility tipler:¹

Partial, Omit ve Pick

Utility tipler iç içe yazılabilir. Ürün güncellemesinde id değişmez, diğer alanların hepsi opsiyoneldir:

type ProductUpdate = Partial<Omit<Product, "id">>;

function updateProduct(id: number, changes: ProductUpdate) {
  // ...
}

updateProduct(1, { price: 1199 }); // OK
updateProduct(1, { id: 2 });
// Hata: Object literal may only specify known properties, and 'id' does not exist in type 'Partial<Omit<Product, "id">>'.

Sepet kalemi, ürünün birkaç alanı ile adet bilgisinin birleşimidir:

type CartItem = Pick<Product, "id" | "name" | "price"> & { quantity: number };

Record, Exclude ve Extract

Record<Category, number>, union'daki her anahtarın yazılmasını zorunlu kılar:¹

const stock: Record<Category, number> = { electronics: 12, books: 40 };
// Hata: Property 'home' is missing in type '{ electronics: number; books: number; }' but required in type 'Record<"books" | "electronics" | "home", number>'.

Exclude ve Extract bir union'ı filtreler:¹

type OrderStatus = "pending" | "shipped" | "delivered" | "cancelled";

type OpenStatus = Exclude<OrderStatus, "delivered" | "cancelled">; // "pending" | "shipped"
type ClosedStatus = Extract<OrderStatus, "delivered" | "cancelled">; // "delivered" | "cancelled"

ReturnType, Parameters ve Awaited

Bu üçü bir fonksiyonun tipinden türetir. Fonksiyonun kendisi bir değer olduğu için önce typeof ile tipini almanız gerekir; ReturnType<fetchProduct> yazarsanız 'fetchProduct' refers to a value, but is being used as a type here. Did you mean 'typeof fetchProduct'? hatası alırsınız.⁴

async function fetchProduct(id: number) {
  const response = await fetch(`/api/products/${id}`);
  const data: unknown = await response.json();
  return { data, fetchedAt: new Date() };
}

type FetchArgs = Parameters<typeof fetchProduct>; // [id: number]
type FetchResult = ReturnType<typeof fetchProduct>; // Promise<{ data: unknown; fetchedAt: Date }>
type FetchData = Awaited<ReturnType<typeof fetchProduct>>; // { data: unknown; fetchedAt: Date }

async fonksiyonların dönüş tipi Promise ile sarılıdır; Awaited bu sarmalı açar.¹²

satisfies

Bir object'in belirli bir tipe uyduğunu kontrol etmek isteyip daha dar tipini de korumak istediğiniz durumlar için TypeScript 4.9 satisfies operatörünü getirdi.⁶

type Route = { path: string; title: string };

// Tip annotation: tip kazanır
const routes: Record<string, Route> = {
  home: { path: "/", title: "Ana sayfa" },
  cart: { path: "/cart", title: "Sepet" },
};
routes.wishlist.path; // hata yok, çalışırken patlar

// satisfies: değer kazanır
const checkedRoutes = {
  home: { path: "/", title: "Ana sayfa" },
  cart: { path: "/cart", title: "Sepet" },
} satisfies Record<string, Route>;
checkedRoutes.wishlist;
// Hata: Property 'wishlist' does not exist on type '{ home: { path: string; title: string; }; cart: { path: string; title: string; }; }'.

Her iki durumda da her rotanın path ve title alanları kontrol edilir. Fark, sonuçtaki tiptir: annotation ile tip Record<string, Route>'a genişler ve hangi anahtarların olduğu unutulur; satisfies ile keyof typeof checkedRoutes hâlâ "home" | "cart"'tır. Matt Pocock'un özetiyle: iki nokta üst üste ile "tip değeri yener", satisfies ile "değer tipi yener".⁷

satisfies, as'ten farklı olarak tipi zorlamaz, gerçekten kontrol eder. Bir kategori adını yanlış yazarsanız yakalar:

const categoryLabels = {
  electronics: "Elektronik",
  books: "Kitap",
  hom: "Ev",
} satisfies Record<Category, string>;
// Hata: Object literal may only specify known properties, but 'hom' does not exist in type 'Record<"books" | "electronics" | "home", string>'. Did you mean to write 'home'?

type MyPartial<T> = { [K in keyof T]?: T[K] };
type Mutable<T> = { -readonly [K in keyof T]: T[K] };

type MyNonNullable<T> = T extends null | undefined ? never : T;
type ElementOf<T> = T extends (infer Item)[] ? Item : never;

type A = MyNonNullable<string | null>; // string
type B = ElementOf<Product[]>; // Product

Kendin Dene

• TS Playground'da categories dizisine "toys" ekleyin ve Record<Category, number> olan stock değişkeninin ne hata verdiğine bakın.

• type NewProduct = Omit<Product, "id"> tanımlayın ve id'siz bir ürün object'i yazın.

• checkedRoutes'taki bir rotadan title'ı silip hata mesajını okuyun. Sonra keyof typeof routes ile keyof typeof checkedRoutes tiplerini fareyle karşılaştırın.

Detaylı Öğrenmek İçin

• Resmi doküman: TypeScript Handbook'un Utility Types sayfası; her tipin açıklaması, örneği ve hangi sürümde geldiği.¹

• Kitap: Matt Pocock'un Total TypeScript Essentials kitabının "Deriving Types" bölümü; ne zaman türetmeli, ne zaman ayrı tip yazmalı.²

• Yazı: Matt Pocock'un "Clarifying the satisfies Operator" yazısı; annotation, satisfies ve as karşılaştırması.⁷

• Konuşma: Luca Del Puppo'nun mapped ve conditional type'larla Partial, Pick, Omit gibi tipleri yeniden yazdığı konuşma (JSNation 2025, 23 dk).¹⁰