Sử dụng Inheritance (kế thừa) trong TypeScript

Một class có thể tái sử dụng các thuộc tính và phương thức của class khác. Cái này gọi là sự inheritance (kế thừa) trong TypeScript. Cái class kế thừa các thuộc tính và phương thức được gọi là child class( lớp con). Và class có các thuộc tính và phương thức được kế thừa

Một class có thể tái sử dụng các thuộc tính và phương thức của class khác. Cái này gọi là sự inheritance (kế thừa) trong TypeScript.
Cái class kế thừa các thuộc tính và phương thức được gọi là child class( lớp con). Và class có các thuộc tính và phương thức được kế thừa được gọi là parent class( lớp cha).
Inheritance cho phép bạn tái sử dụng lại chức năng của một class hiện có mà không cần viết lại nó.TypeScript cũng hỗ trợ kế thừa như ES6.
Ví dụ:

classPerson{constructor(private firstName:string,private lastName:string){this.firstName = firstName;this.lastName = lastName;}getFullName():string{return`${this.firstName}${this.lastName}`;}describe():string{return`This is ${this.firstName}${this.lastName}.`;}}

Để sử dụng kế thừa, bạn sử dụng từ khóa extends . Ví dụ, chung ta có lớp Employee kế thừa lớp Person như sau:

classEmployeeextendsPerson{//..}

Trong ví dụ này, lớp Employee là một class con và lớp Person là class cha.

Constructor
Vì lớp Person có một constructor khởi tạo các thuộc tính firstNamelastName, do đó, bạn cần khởi tạo các thuộc tính này trong constructor của lớp Employee bằng cách gọi constructor của lớp cha.
Để gọi constructor của lớp cha trong constructor của lớp con, bạn sử dụng cú pháp super(), ví dụ:

classEmployeeextendsPerson{constructor(
        firstName:string,
        lastName:string,private jobTitle:string){// call the constructor of the Person class:super(firstName, lastName);}}

Bây giờ mình sử dụng lớp Employee với code sau:

let employee =newEmployee('John','Doe','Front-end Developer');

Vì lớp Employee kế thừa các thuộc tính và phương thức của ớp Person, do đó, bạn có thể gọi các phương thức getFullName()describe() trên đối tượng Employee như sau:

let employee =newEmployee('John','Doe','Web Developer');console.log(employee.getFullName());console.log(employee.describe());

Output:

John Doe
This is John Doe.

Method overriding
Khi bạn gọi phương thức employee.describe() trên đối tượng Employee, phương thức describe() của lớp Person được thực thi để hiển thị thông báo: This is John Doe
Nếu bạn muốn lớp Employee có một thay đổi riêng của phương thức describe() , bạn có thể định nghĩa nó trong lớp Employee như bên dưới:

classEmployeeextendsPerson{constructor(
        firstName:string,
        lastName:string,private jobTitle:string){super(firstName, lastName);}describe():string{returnsuper.describe()+`I'm a ${this.jobTitle}.`;}}

Trong phương thức describe() , chúng ta gọi phương thức describe() của lớp cha sử dụng cú pháp: super.methodInParentClass().
Nếu bạn gọi phương thức describe() trên đối tương Employee, phương thức describe() trong lớp Employee sẽ được gọi:

let employee =newEmployee('John','Doe','Web Developer');console.log(employee.describe());

Output:

This is John Doe.I'm a Web Developer.

Tóm tăt:

  • Sử dụng từ khóa extends để cho phép một lớp kế thừa từ một lớp khác
  • Sử dụng super() trong constructor của lớp con để gọi constructor của lớp cha. Bạn cũng có thể sử dụng cú pháp super.methodInParentClass() để gọi methodInParentClass() trong phương thức của class con.

Nguồn: viblo.asia

Bài viết liên quan

WebP là gì? Hướng dẫn cách để chuyển hình ảnh jpg, png qua webp

WebP là gì? WebP là một định dạng ảnh hiện đại, được phát triển bởi Google

Điểm khác biệt giữa IPv4 và IPv6 là gì?

IPv4 và IPv6 là hai phiên bản của hệ thống địa chỉ Giao thức Internet (IP). IP l

Check nameservers của tên miền xem website trỏ đúng chưa

Tìm hiểu cách check nameservers của tên miền để xác định tên miền đó đang dùn

Mình đang dùng Google Domains để check tên miền hàng ngày

Từ khi thông báo dịch vụ Google Domains bỏ mác Beta, mình mới để ý và bắt đầ