TypeScript extends: Interface veya Type Genişletme

interface Child extends Parent, Parent tipinin her üyesine ve kendi üyelerine sahip yeni bir interface oluşturur. Çocuk tipin değerleri, ebeveynin beklendiği her yerde kullanılabilir, çünkü onun tüm özelliklerine sahiptirler.

interface Animal {
  name: string;
  age: number;
}

interface Dog extends Animal {
  breed: string;
  bark(): string;
}

const rex: Dog = {
  name: "Rex",
  age: 4,
  breed: "collie",
  bark() {
    return `${this.name} says woof`;
  },
};

function birthday(a: Animal): number {
  return a.age + 1;
}

console.log(rex.bark());    // Rex says woof
console.log(birthday(rex)); // 5: a Dog is also an Animal

Aynı anahtar kelime TypeScript'te birbiriyle ilişkili ama farklı anlamlarla dört yerde karşınıza çıkar:

Birden Fazla Interface'i Genişletmek

extends sonrasında birkaç ebeveyni virgülle ayırarak listeleyin. Sonuç hepsinin üyelerine sahip olur:

interface Identified {
  id: number;
}

interface Timestamped {
  createdAt: Date;
  updatedAt: Date;
}

interface Post extends Identified, Timestamped {
  title: string;
}

// Post requires id, createdAt, updatedAt and title

İki ebeveyn aynı özelliği özdeş olmayan tiplerle bildiriyorsa çocuk TS2320 hatasıdır (Interface 'Post' cannot simultaneously extend types 'A' and 'B'); tabii çocuk o özelliği ikisine de atanabilen bir tiple yeniden bildirmediği sürece.

Bir Type Alias'ı Genişletmek

Bir type alias'ının extends ifadesi yoktur. Onun üzerine, iki tarafın üyelerini birleştiren bir intersection, &, ile kurarsınız. Bir interface bir nesne type alias'ını doğrudan da genişletebilir, bir type alias da bir interface ile intersection oluşturabilir: iki tür serbestçe karışır.

type Timestamps = { createdAt: string; updatedAt: string };
type WithId = { id: number };

// type alias: extend with &
type Post = WithId & Timestamps & { title: string };

// interface: extends works on object type aliases too
interface Reply extends WithId, Timestamps {
  postId: number;
  body: string;
}

const post: Post = { id: 1, title: "Hello", createdAt: "2024-03-15", updatedAt: "2024-03-15" };
const reply: Reply = { id: 7, postId: 1, body: "Nice", createdAt: "2024-03-16", updatedAt: "2024-03-16" };

console.log(post.title, reply.body, reply.postId === post.id); // Hello Nice true

İki yol, özellikler çakışana kadar aynı şekilde davranır: extends çakışan bir özelliği bildirimde bildirir, & ise onu sessizce never yapar. Karşılaştırma interface ile type sayfasında, & ayrıntıları da intersection tipler sayfasında.

Özellik Tiplerini Geçersiz Kılmak

Bir çocuk interface bir ebeveyn özelliğini yeniden bildirebilir, ama yalnızca ebeveyninkine atanabilen bir tiple. string tipini bir literal'e daraltmak ya da bir union'dan null çıkarmak serbesttir. Tipi ilgisiz bir şeye değiştirmek serbest değildir:

// This does not compile: kind cannot become a number
interface Shape {
  kind: string;
  color: string | null;
}

interface Circle extends Shape {
  kind: "circle"; // narrower than string: allowed
  color: string;  // narrower than string | null: allowed
  radius: number;
}

interface Label extends Shape {
  kind: number;   // not assignable to string: error
}

const c: Circle = { kind: "circle", color: "red", radius: 2 };
console.log(c);

index.ts(13,11): error TS2430: Interface 'Label' incorrectly extends interface 'Shape'.
  Types of property 'kind' are incompatible.
    Type 'number' is not assignable to type 'string'.

Kural, bir Label değerinin hâlâ Shape beklenen her yerde kullanılabilmesi için vardır. kind bir sayı olabilseydi, Shape için yazılmış ve shape.kind.toUpperCase() çağıran kod bozulurdu.

Özellikleri Omit ile Değiştirmek

Miras alınan bir özellik için gerçekten farklı bir tipe ihtiyacınız olduğunda, önce onu Omit ile ebeveynden çıkarın, sonra yenisini bildirin. Yaygın bir durum, kimliklerin ve tarihlerin string olarak geldiği API verilerini dönüştürmektir:

interface ApiUser {
  id: string; // the API sends ids as strings
  name: string;
  createdAt: string;
}

// Drop the properties to change, then declare them again
interface User extends Omit<ApiUser, "id" | "createdAt"> {
  id: number;
  createdAt: Date;
}

function toUser(raw: ApiUser): User {
  return { ...raw, id: Number(raw.id), createdAt: new Date(raw.createdAt) };
}

const u = toUser({ id: "42", name: "Ada", createdAt: "2024-03-15T10:30:00Z" });
console.log(u.id + 1, u.createdAt.toISOString()); // 43 2024-03-15T10:30:00.000Z

Omit<ApiUser, "id" | "createdAt"> tipi { name: string } olur, bu yüzden yeni id ve createdAt hiçbir şeyle çakışmaz. Pick, Partial ve diğer utility tipler de aynı şekilde genişletilebilir.

Sınıflarla extends

class Dog extends Animal JavaScript sınıf kalıtımıdır ve interface extends ifadesinin aksine çalışma zamanında vardır: Dog, Animal sınıfının constructor'ını, alanlarını ve metot gerçeklemelerini alır ve new Dog(...) instanceof Animal sonucu true olur. TypeScript bunun üzerine override anahtar kelimesi gibi tip kontrolleri ekler:

class Animal {
  constructor(public name: string) {}
  speak(): string {
    return `${this.name} makes a sound`;
  }
}

class Dog extends Animal {
  override speak(): string {
    return `${this.name} barks`;
  }
}

const pets: Animal[] = [new Animal("Generic"), new Dog("Rex")];
for (const p of pets) console.log(p.speak());
// Generic makes a sound
// Rex barks

Bir sınıf yalnızca bir sınıfı extends edebilir, ama istediği sayıda interface'i implements edebilir. implements hiçbir şey kopyalamaz: yalnızca sınıfın interface'in gerektirdiklerini bildirdiğini kontrol eder. super, protected üyeler ve override kalıtım sayfasında anlatılıyor.

Generic'lerde ve Conditional Tiplerde extends

Açılı parantezlerin içinde extends bir kısıttır. <T extends { length: number }>, sayısal bir length özelliğine sahip her tip argümanını kabul eder ve fonksiyon gövdesinin .length kullanmasına izin verir. Bir conditional tipte T extends U ? X : Y, T tipinin U tipine atanabilir olup olmadığını sorar.

// Generic constraint: T must have a length property
function longest<T extends { length: number }>(a: T, b: T): T {
  return a.length >= b.length ? a : b;
}

console.log(longest("apple", "fig"));    // apple
console.log(longest([1, 2], [1, 2, 3])); // [ 1, 2, 3 ]

// @ts-expect-error: Argument of type 'number' is not assignable to parameter of type '{ length: number; }'.
longest(10, 20);

// Conditional type: a type-level if/else
type IsString<T> = T extends string ? "yes" : "no";
const a: IsString<"hi"> = "yes";
const b: IsString<42> = "no";
console.log(a, b); // yes no

İki yerde de extends, interface biçiminin kontrol ettiği aynı ilişki olan "atanabilir" anlamına gelir. Kısıtlar generic kısıtları sayfasında, tip düzeyindeki testler de conditional tipler sayfasında ayrıntılı anlatılıyor.