- vừa được xem lúc

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

0 0 14

Người đăng: Gấu con

Theo Viblo Asia

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ụ:

class Person { 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:

class Employee extends Person { //..
}

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ụ:

class Employee extends Person { 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 = new Employee('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 = new Employee('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:

class Employee extends Person { constructor( firstName: string, lastName: string, private jobTitle: string) { super(firstName, lastName); } describe(): string { return super.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 = new Employee('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.

Bình luận

Bài viết tương tự

- vừa được xem lúc

Giới thiệu Typescript - Sự khác nhau giữa Typescript và Javascript

Typescript là gì. TypeScript là một ngôn ngữ giúp cung cấp quy mô lớn hơn so với JavaScript.

0 0 500

- vừa được xem lúc

Type annotation vs Type Inference - Typescript

Trong bài viết này, chúng ta sẽ tìm hiểu kỹ về TypeScript bằng cách tìm hiểu sự khác biệt giữa kiểu chú thích và kiểu suy luận. Tôi sẽ cho rằng bạn có một số kinh nghiệm về JavaScript và biết về các kiểu cơ bản, như chuỗi, số và boolean.

0 0 32

- vừa được xem lúc

Type Annotation và Type Inference trong TypeScript là gì?

Khi làm việc với javascript chắc hẳn các bạn đã quá quen với việc dùng biến mà không cần phải quan tâm đến kiểu dữ liệu của nó là gì phải không? Đúng là mới đầu tiếp cận với Typescript mình cũng cảm thấy nó khá là phiền vì cần phải khai báo đủ type để nó chặt chẽ hơn. Lúc đó mình còn nghĩ: " JavaScr

0 0 25

- vừa được xem lúc

Tìm hiểu TypeScript và kiến thức cơ bản

TypeScript là gì. TypeScript sử dụng tất cả các tính năng của của ECMAScript 2015 (ES6) như classes, modules.

0 0 35

- vừa được xem lúc

TypeScript - P1: Vì sao TypeScript được yêu thích đến vậy?

Trải nghiệm thực tế. Trước khi là một Web Developer, tôi là một Mobile Developer và Java là thứ mà tôi từng theo đuổi.

0 1 58

- vừa được xem lúc

4 Tính năng rất hay từ TypeScript

Xin chào các bạn hôm nay mình xin chia sẽ những tính năng rất hay của TypeScript (TS), các bạn cùng tìm hiểu nhé. Ngoài việc set Type cho biến, tham số hay function thì ví dụ khi bạn nhìn vào một tham

0 0 82