Interface, type ve union

Object Tiplerine İsim Vermek

Önceki derste object tipini parametrenin yanına doğrudan yazdınız: product: { name: string; price: number }. Aynı şekil ürün listesinde, sepette ve sipariş özetinde tekrar tekrar gerekir. Her seferinde yeniden yazmak yerine şekle bir isim verirsiniz. TypeScript'te bunun iki yolu vardır: type ve interface.¹

Type alias, herhangi bir tipe verilen isimdir.¹

type Product = {
  readonly id: number;
  name: string;
  price: number;
  description?: string;
};

const headset: Product = { id: 1, name: "Kablosuz Kulaklık", price: 1299.9 };

Interface de bir object tipine isim vermenin yoludur. Eşittir işareti ve sondaki noktalı virgül yoktur; geri kalanı aynıdır.¹

interface Product {
  readonly id: number;
  name: string;
  price: number;
  description?: string;
}

TypeScript tipleri isimlerine göre değil şekillerine göre karşılaştırır (structural typing): Product'ın istediği özelliklere sahip her object, Product yerine geçer.¹

Opsiyonel ve readonly

Özellik adından sonraki ? onu opsiyonel yapar; okurken undefined olabileceğini hesaba katmanız gerekir. readonly ise özelliğin yeniden atanmasını engeller.²

headset.price = 1199.9; // sorun yok
headset.id = 2;
// Hata: Cannot assign to 'id' because it is a read-only property.
headset.description.toUpperCase();
// Hata: 'headset.description' is possibly 'undefined'.

İç İçe Object ve Array

Tipler birbirinin içinde kullanılabilir. Sipariş, kalemlerinden oluşan bir array ve bir adres taşır.²

type OrderItem = {
  product: Product;
  quantity: number;
};

type Order = {
  id: string;
  items: OrderItem[];
  shippingAddress: {
    city: string;
    district: string;
  };
};

Sadece bir yerde kullanılan shippingAddress gibi bir şekli içeride bırakabilirsiniz. Başka yerde de gerekiyorsa ona da isim verin.

Union Tipler

Union, bir değerin birkaç tipten biri olabileceğini söyler ve | ile yazılır.¹ Ürün kimliği bazı yerlerde sayı, bazı yerlerde stok kodu olabilir:

type ProductId = number | string;

function findProduct(id: ProductId) {
  console.log(id.toString()); // iki tipte de var
  console.log(id.toFixed(0));
  // Hata: Property 'toFixed' does not exist on type 'ProductId'.
}

findProduct("SKU-42");
findProduct(true);
// Hata: Argument of type 'boolean' is not assignable to parameter of type 'ProductId'.

TypeScript yalnızca union'ın her üyesinde geçerli olan işlemlere izin verir.¹ id'nin sayı mı yazı mı olduğunu kontrol edip daraltmayı (narrowing) bir sonraki derste göreceksiniz.

Literal union

Literal tiplerle kurulan union, bir değerin alabileceği seçenekleri tek tek sayar. Sipariş durumu, beden ya da sıralama seçeneği gibi sabit listeler için en çok kullanılan kalıptır; editör de bu değerleri otomatik tamamlar.³

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

function updateStatus(orderId: string, status: OrderStatus) {
  console.log(`${orderId}: ${status}`);
}

updateStatus("ORD-1001", "shipped");
updateStatus("ORD-1001", "cancelled");
// Hata: Argument of type '"cancelled"' is not assignable to parameter of type 'OrderStatus'.

enum yerine literal union

TypeScript'in bir de enum yapısı vardır. Ancak enum tip bilgisi olmanın ötesinde çalışma anında kod üretir.¹ Handbook da modern TypeScript'te çoğu zaman as const bir object'in yeterli olduğunu söyler.⁴

enum OrderStatus {
  // Hata: This syntax is not allowed when 'erasableSyntaxOnly' is enabled.
  Pending = "pending",
  Shipped = "shipped",
}

erasableSyntaxOnly ayarı, silinerek JavaScript'e dönüşemeyen enum gibi yapıları hata yapar.⁵ Bu ayar TypeScript 5.8'le geldi ve Vite'ın React şablonunda açık gelir.⁶ Matt Pocock da yeni bir projeye enum eklemeyeceğini söyler.⁷ Kısacası sabit seçenekler için literal union yazın.

Intersection Tipler

Intersection, birden fazla tipi & ile birleştirir; sonuçta hepsinin özellikleri bulunur.² Sepet kalemini Product'a adet ekleyerek tanımlayabilirsiniz. Interface'te aynı işi extends yapar.²

type CartItem = Product & { quantity: number };

interface DigitalProduct extends Product {
  downloadUrl: string;
}

const cartItem: CartItem = { ...headset, quantity: 2 };

interface mi type mı?

Çoğu durumda ikisi de iş görür. Farklar şunlardır:¹²⁸

Declaration merging, aynı isimle yazılan iki interface'in sessizce tek interface'e dönüşmesidir:

interface Customer {
  id: number;
}

interface Customer {
  email: string;
}

const customer: Customer = { id: 1 };
// Hata: Property 'email' is missing in type '{ id: number; }' but required in type 'Customer'.

Kütüphane tiplerini genişletirken işe yarar ama farkında olmadan da olabilir.⁹ Hangisini seçeceğiniz konusunda kaynaklar ayrışır:

• TypeScript Handbook: Çoğunlukla kişisel tercihtir; bir kural isterseniz type'ın özelliklerine ihtiyaç duyana kadar interface kullanın.¹

• Matt Pocock: Varsayılan olarak type kullanın; daha esnek ve daha az şaşırtıcıdır. Object kalıtımı gerekiyorsa interface extends seçin; çakışan özellikleri tanımda yakalar ve derleyici için daha hızlıdır.⁸¹⁰

Bu yol haritasında, React component prop'ları dahil, type kullanıyoruz. Önemli olan proje içinde tutarlı olmaktır.

Fazla Özellik Kontrolü

Bir object literal'ı doğrudan tipli bir değişkene atadığınızda ya da fonksiyona verdiğinizde, TypeScript tipte olmayan özellikleri hata sayar. Buna excess property check denir ve çoğunlukla yazım hatalarını yakalar.²

const product: Product = {
  id: 1,
  name: "Kablosuz Kulaklık",
  price: 1299.9,
  colour: "siyah",
  // Hata: Object literal may only specify known properties, and 'colour' does not exist in type 'Product'.
};

Tipleri Dosyalar Arasında Paylaşmak

Tipler değerler gibi export ve import edilir. Yalnızca tip içeren import'ları import type ile, karışık olanlarda tipin önüne type yazarak işaretleyin. Böylece Vite gibi araçlar bu import'ları güvenle silebilir.¹¹

// types.ts
export type Product = { id: number; name: string; price: number };

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

export function formatPrice(price: number) {
  return `${price.toFixed(2)} TL`;
}

// cart.ts
import { formatPrice, type Product } from "./types";
import type { OrderStatus } from "./types";

Vite şablonunda açık gelen verbatimModuleSyntax ayarı, tipi type olmadan import ederseniz hata verir: 'Product' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.¹²⁶

Kendin Dene

TypeScript Playground'da:

• Product tipini interface ile yazın ve aynı isimle ikinci bir interface Product { stock: number } ekleyin; mevcut object'lerin neden hata verdiğine bakın.

• Aynısını type ile deneyin ve Duplicate identifier hatasını görün.

• OrderStatus'a "cancelled" ekleyin ve updateStatus çağrısındaki hatanın kaybolduğunu görün.

• type A = { name: string } ile type B = { name: number } tiplerini & ile birleştirin; name'in tipinin never olduğunu görün.

Detaylı Öğrenmek İçin

• Resmi doküman: TypeScript Handbook'un Object Types sayfası; opsiyonel, readonly, excess property check, extends ve intersection.²

• Kitap: Matt Pocock'un çevrimiçi okunabilen Total TypeScript Essentials kitabının "Objects" bölümü; intersection ile interface extends karşılaştırması.¹⁰

• Yazı: Matt Pocock'un "Type vs Interface: Which Should You Use?" yazısı.⁸

• Yazı: Stefan Baumgartner'ın declaration merging'in yol açtığı sürprizleri anlatan "Tidy TypeScript: Prefer type aliases over interfaces" yazısı.⁹

• Alıştırma: Matt Pocock'un ücretsiz, etkileşimli Beginner's TypeScript eğitimi.¹³