extends TypeScript: Memperluas Interface atau Type

interface Child extends Parent membuat interface baru dengan setiap member milik Parent ditambah member miliknya sendiri. Nilai bertipe anak bisa dipakai di mana pun induknya diharapkan, karena nilai itu punya semua property induknya.

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

Kata kunci yang sama muncul di empat tempat di TypeScript, dengan arti yang berkaitan tetapi berbeda:

Meng-extend Beberapa Interface

Cantumkan beberapa induk setelah extends, dipisahkan dengan koma. Hasilnya punya member dari semua induk itu:

interface Identified {
  id: number;
}

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

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

// Post requires id, createdAt, updatedAt and title

Kalau dua induk mendeklarasikan property yang sama dengan tipe yang tidak identik, interface anak menghasilkan error TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B'), kecuali interface anak mendeklarasikan ulang property itu dengan tipe yang bisa diberikan ke keduanya.

Memperluas Type Alias

Type alias type tidak punya klausa extends. Kamu membangun di atasnya dengan intersection, &, yang menggabungkan member dari kedua sisi. Interface juga bisa langsung meng-extend type alias berupa objek, dan type alias bisa meng-intersect interface: keduanya bisa dicampur dengan bebas.

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

Kedua cara itu berperilaku sama sampai ada property yang bentrok: extends melaporkan property yang bentrok di deklarasinya, sedangkan & diam-diam mengubahnya menjadi never. Perbandingannya ada di halaman interface vs type, dan detail & ada di halaman intersection type.

Menimpa Tipe Property

Interface anak boleh mendeklarasikan ulang property induk, tetapi hanya dengan tipe yang bisa diberikan ke tipe milik induk. Mempersempit string menjadi literal, atau membuang null dari union, diizinkan. Mengubah tipenya menjadi sesuatu yang tidak berhubungan tidak diizinkan:

// 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'.

Aturan ini ada supaya Label tetap bisa dipakai di mana pun Shape diharapkan. Kalau kind bisa berupa angka, kode yang ditulis untuk Shape dan memanggil shape.kind.toUpperCase() akan rusak.

Mengganti Property dengan Omit

Kalau kamu benar-benar butuh tipe yang berbeda untuk property warisan, buang dulu property itu dari induknya dengan Omit, lalu deklarasikan yang baru. Kasus yang umum adalah mengonversi data API, di mana id dan tanggal datang sebagai string:

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"> adalah { name: string }, jadi id dan createdAt yang baru tidak bentrok dengan apa pun. Pick, Partial, dan utility type lainnya bisa di-extend dengan cara yang sama.

extends pada Class

class Dog extends Animal adalah pewarisan class JavaScript, dan tidak seperti extends pada interface, ia ada saat runtime: Dog mendapat constructor, field, dan implementasi method milik Animal, dan new Dog(...) instanceof Animal bernilai true. TypeScript menambahkan pemeriksaan tipe di atasnya, seperti kata kunci override:

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

Sebuah class hanya bisa extends satu class, tetapi bisa implements interface sebanyak apa pun. implements tidak menyalin apa pun: ia hanya memeriksa bahwa class itu mendeklarasikan apa yang diwajibkan interface. super, member protected, dan override dibahas di inheritance.

extends di Generic dan Conditional Type

Di dalam kurung sudut, extends adalah constraint. <T extends { length: number }> menerima type argument apa pun yang punya length berupa angka, dan membuat badan fungsi bisa memakai .length. Di conditional type, T extends U ? X : Y bertanya apakah T bisa diberikan ke U.

// 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

Di kedua tempat itu, extends berarti "bisa diberikan ke", hubungan yang sama yang diperiksa oleh bentuk interface. Constraint dibahas secara mendalam di generic constraint, dan tes di level tipe di conditional type.