extends trong TypeScript: mở rộng interface hoặc type

interface Child extends Parent tạo một interface mới có mọi thành viên của Parent cộng với thành viên của riêng nó. Giá trị có kiểu con dùng được ở bất cứ đâu cần kiểu cha, vì chúng có đủ mọi thuộc tính của kiểu cha.

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

Cùng một từ khóa này xuất hiện ở bốn chỗ trong TypeScript, với ý nghĩa liên quan nhưng khác nhau:

Mở rộng nhiều interface

Liệt kê nhiều interface cha sau extends, ngăn cách bằng dấu phẩy. Kết quả có thành viên của tất cả các interface đó:

interface Identified {
  id: number;
}

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

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

// Post requires id, createdAt, updatedAt and title

Nếu hai interface cha khai báo cùng một thuộc tính với các kiểu không giống hệt nhau, interface con gây lỗi TS2320 (Interface 'Post' cannot simultaneously extend types 'A' and 'B'), trừ khi interface con khai báo lại thuộc tính đó với một kiểu gán được cho cả hai.

Mở rộng một type alias

Type alias type không có mệnh đề extends. Bạn xây dựng tiếp từ nó bằng phép giao &, kết hợp thành viên của cả hai vế. Một interface cũng có thể mở rộng trực tiếp một type alias kiểu đối tượng, và một type alias có thể giao với một interface: hai loại này kết hợp với nhau thoải mái.

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

Hai cách này hoạt động như nhau cho đến khi các thuộc tính xung đột: extends báo thuộc tính xung đột ngay tại khai báo, còn & âm thầm biến nó thành never. Phần so sánh nằm ở trang interface và type, còn chi tiết về & nằm ở trang intersection type.

Ghi đè kiểu của thuộc tính

Một interface con có thể khai báo lại một thuộc tính của interface cha, nhưng chỉ với một kiểu gán được cho kiểu của cha. Thu hẹp string thành một literal, hoặc bỏ null khỏi một union, là được phép. Đổi sang một kiểu không liên quan thì không:

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

Quy tắc này tồn tại để một Label vẫn dùng được ở mọi nơi cần Shape. Nếu kind có thể là số, code viết cho Shape gọi shape.kind.toUpperCase() sẽ bị hỏng.

Thay thế thuộc tính bằng Omit

Khi thật sự cần một kiểu khác cho thuộc tính được kế thừa, hãy loại nó khỏi interface cha bằng Omit trước, rồi khai báo thuộc tính mới. Một trường hợp phổ biến là chuyển đổi dữ liệu từ API, nơi id và ngày tháng được gửi về dưới dạng chuỗi:

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"> là { name: string }, nên id và createdAt mới không xung đột với thứ gì. Pick, Partial và các utility type khác cũng mở rộng được theo cùng cách.

extends với lớp

class Dog extends Animal là kế thừa lớp (class) của JavaScript, và khác với extends của interface, nó tồn tại lúc chạy: Dog nhận hàm khởi tạo, các trường và phần cài đặt phương thức của Animal, và new Dog(...) instanceof Animal là true. TypeScript bổ sung thêm phép kiểm tra kiểu, như từ khóa 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

Một lớp chỉ extends được một lớp, nhưng có thể implements bao nhiêu interface cũng được. implements không sao chép gì: nó chỉ kiểm tra rằng lớp khai báo đủ những gì interface yêu cầu. super, thành viên protected và override được trình bày trong kế thừa.

extends trong generic và conditional type

Bên trong dấu ngoặc nhọn, extends là một ràng buộc. <T extends { length: number }> nhận mọi đối số kiểu có length kiểu số, và cho phép thân hàm dùng .length. Trong conditional type, T extends U ? X : Y hỏi xem T có gán được cho U không.

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

Ở cả hai chỗ, extends nghĩa là "gán được cho", cũng chính là quan hệ mà dạng interface kiểm tra. Ràng buộc được trình bày kỹ trong ràng buộc generic, còn các phép thử ở mức kiểu nằm trong conditional type.