TypeScript Interface vs Type: Farkları ve Hangisi Kullanılmalı

Bir nesnenin biçimini tanımlamak için interface ve type aynı işi yapar ve biçimler eşleştiğinde birinin değerleri diğerine atanabilir. Farklar kenarlardadır: type, bir interface'in ad veremediği şeylere (union'lar, tuple'lar, hesaplanan tipler) ad verebilir; bir interface de bir type alias'ın yapamadığı birkaç şeyi (birleşme, kontrollü extends) yapabilir.

interface PointI {
  x: number;
  y: number;
}

type PointT = {
  x: number;
  y: number;
};

const a: PointI = { x: 1, y: 2 };
const b: PointT = a; // same shape, so they are interchangeable
const c: PointI = b;

function show(p: PointI): string {
  return `(${p.x}, ${p.y})`;
}

console.log(show(b), show(c)); // (1, 2) (1, 2)

TypeScript nesne tiplerini yapılarına göre karşılaştırır, bu yüzden atanabilirlik açısından bildirimin adı önemli değildir. Aşağıda seçimin önemli olduğu yerlerin listesi var.

Karşılaştırma Tablosu

Yalnızca type'ın Yapabildikleri

Tek bir nesne biçimi olmayan her şey bir type alias gerektirir:

type Status = "idle" | "loading" | "done";                   // union of literals
type Coordinates = [lat: number, lng: number];               // tuple
type Handler = (event: string) => void;                      // function type
type ID = string | number;                                   // union of primitives
type Flags<T> = { [K in keyof T]: boolean };                 // mapped type
type ElementOf<T> = T extends readonly (infer U)[] ? U : T;  // conditional type

const current: Status = "loading";
const here: Coordinates = [51.5, -0.12];
const onSave: Handler = (e) => console.log("saved:", e);
const flags: Flags<{ dark: string; beta: number }> = { dark: true, beta: false };
const first: ElementOf<string[]> = "a";

onSave(current);
console.log(here, flags, first);
// saved: loading
// [ 51.5, -0.12 ] { dark: true, beta: false } a

Bunların hiçbiri interface ile yazılamaz (son ikisi mapped types ve conditional types sayfalarında anlatılıyor). Nesne biçimleri için ne kullanırsa kullansın her kod tabanının bir yerde type kullanmasının pratik nedeni budur.

Yalnızca interface'in Yapabildiği: Declaration Merging

Aynı kapsamda aynı adı taşıyan iki interface bildirimi tek bir bildirimde birleşir. Aynı adı taşıyan iki type bildirimi ise TS2300 hatasıdır, Duplicate identifier.

interface Settings {
  theme: string;
}
interface Settings {
  fontSize: number;
}
const s: Settings = { theme: "dark", fontSize: 14 }; // needs both

type Options = { a: number };
type Options = { b: number }; // error TS2300: Duplicate identifier 'Options'.

Kütüphane tipleri dışarıdan birleştirme ile genişletilir: global Window tipine, Express'in Request tipine ya da bir kütüphanenin tema tipine bir özellik eklemek. Kullanıcıların genişletmesi gerekebilecek tipler yayınlıyorsanız interface kullanın. Kendi uygulama kodunuzda kazara bir birleştirme (aynı global interface adını bildiren iki betik dosyası), ikisi aynı özelliği farklı tiplerle bildirmedikçe sessizce gerçekleşir; bu da bazı ekiplerin type tercih etmek için öne sürdüğü bir gerekçedir.

extends ile Intersection

Bir interface extends ile, bir type alias & ile genişler. Çoğunlukla aynı sonucu üretirler ama çakışan bir özelliği farklı ele alırlar. extends çakışmayı bildirimde bildirir:

// This does not compile: id cannot change from string to number
interface Base {
  id: string;
  name: string;
}

interface Broken extends Base {
  id: number;
}

const x: Broken = { id: 1, name: "a" };
console.log(x);

index.ts(7,11): error TS2430: Interface 'Broken' incorrectly extends interface 'Base'.
  Types of property 'id' are incompatible.
    Type 'number' is not assignable to type 'string'.

Bir intersection aynı çakışmayı sessizce kabul eder ve özelliği never tipine çevirir (aynı zamanda bir number olan bir string). Hata ancak daha sonra, bir değer oluşturmaya çalıştığınızda görünür:

type Base = { id: string; name: string };
type Broken = Base & { id: number }; // no error here

// id is string & number, which is never: no object can satisfy Broken
// @ts-expect-error: Type 'number' is not assignable to type 'never'.
const x: Broken = { id: 1, name: "a" };

console.log("the alias compiled; only using it failed");

Hata, ona neden olan bildirimden uzakta, nesneyi gösterir. Nesne tiplerini başka nesne tiplerinden oluştururken extends daha iyi bir mesaj verir.

Index Signature'lar: Gözden Kaçması Kolay Bir Fark

Bir nesne tipi için type alias örtük bir index signature alır, bu yüzden bir Record<string, unknown> beklenen yere verilebilir. Bir interface almaz. Bu tasarım gereğidir: TypeScript ekibinin açıklamasına göre (TypeScript deposundaki #15300 numaralı issue) bir interface sonraki bildirimlerle genişletilebilir, bu yüzden onun için bir index signature çıkarmak daha az güvenlidir ve kuralı şimdi değiştirmek çok fazla kodu bozardı.

interface UserI { name: string; age: number }
type UserT = { name: string; age: number };

function logFields(fields: Record<string, unknown>) {
  for (const [key, value] of Object.entries(fields)) {
    console.log(`${key}=${String(value)}`);
  }
}

const t: UserT = { name: "Ada", age: 36 };
const i: UserI = { name: "Alan", age: 41 };

logFields(t); // fine

// @ts-expect-error: Index signature for type 'string' is missing in type 'UserI'.
logFields(i);

logFields({ ...i }); // a spread copy is a fresh object type, so it is accepted

@ts-expect-error ile işaretlenen çağrı yine çalışır ve Alan'ın alanlarını yazdırır: kural derleme zamanına aittir. Bir interface değeri Record<string, ...> ile tiplenmiş bir loglama, serileştirme veya sorgu yardımcısına verildiğinde alınan kafa karıştırıcı hatanın alışılmış nedeni budur. O tek bildirimi type yapın, değeri yayın (spread) ya da yardımcının parametresini bir interface veya bir generic ile tipleyin.

Performans ve Hata Mesajları

TypeScript wiki'sinin Performance sayfası ("Preferring Interfaces Over Intersections" bölümü), nesne tiplerini birleştirirken type Foo = Bar & Baz & { ... } yerine interface Foo extends Bar, Baz { ... } önerir. Gerekçeleri: bir interface, özellik çakışmalarını algılayan tek ve düz bir nesne tipidir; interface'ler arasındaki tip ilişkileri önbelleğe alınır (intersection'ların bütünü alınmaz); ve bir değeri bir intersection'a karşı kontrol etmek, düzleştirilmiş tipten önce her bileşeni kontrol eder. Fark, çok sayıda birleştirilmiş tip içeren büyük kod tabanlarında önemlidir; birkaç sıradan nesne biçimi için ölçemezsiniz.

Aynı sayfa interface'lerin daha iyi göründüğünü de belirtir. Bir interface üzerine gelince açılan ipuçlarında ve hata mesajlarında adıyla gösterilir; bir intersection alias'ı ise çoğu zaman parçalarına açılmış halde yazdırılır, bu da uzun mesajları okumayı zorlaştırır.

Hangisini Kullanmalı

İşe yarayan bir kural:

1. Nesne biçimleri: interface. Kontrollü extends, büyük birleşimlerde daha anlaşılır hatalar sağlar ve kütüphane kullanıcılarının onu genişletmesine izin verir. Bu, TypeScript handbook'unun pratik kuralıyla örtüşür: "type özelliklerine ihtiyaç duyana kadar interface kullanın".
2. Geri kalan her şey: type. Union'lar, tuple'lar, fonksiyon tipleri, literal tipler ve mapped, conditional veya template literal tiplerle oluşturulan her şey.
3. İstisna: Record<string, ...> parametrelerine uyması gereken bir nesne biçimi için ya da birleştirmeyi bilerek engellemek istediğinizde type kullanın.

Her şey için type kullanmak da tutarlı bir seçimdir ve pek çok kod tabanı bunu yapar. Kaçınılması gereken tek seçenek ikisini gelişigüzel karıştırmaktır: okuyucuların bir farkın kasıtlı olup olmadığını merak etmesine yol açar.