Các lớp TypeScript
TypeScript thêm các loại và công cụ sửa đổi mức độ hiển thị vào các lớp JavaScript.
Tìm hiểu thêm về các lớp JavaScript tại đây .
Thành viên: Loại
Các thành viên của một lớp (thuộc tính và phương thức) được nhập bằng cách sử dụng các chú thích kiểu, tương tự như các biến.
Ví dụ
class Person {
name: string;
}
const person = new Person();
person.name = "Jane";
Hãy tự mình thử »Thành viên: Tầm nhìn
Các thành viên trong lớp cũng được cung cấp các sửa đổi đặc biệt ảnh hưởng đến khả năng hiển thị.
Có ba công cụ sửa đổi mức độ hiển thị chính trong TypeScript.
-
public- (mặc định) cho phép truy cập thành viên lớp từ mọi nơi -
private- chỉ cho phép truy cập vào thành viên lớp từ trong lớp -
protected- cho phép truy cập vào thành viên lớp từ chính nó và bất kỳ lớp nào kế thừa nó, được đề cập trong phần kế thừa bên dưới
Ví dụ
class Person {
private name: string;
public constructor(name: string) {
this.name = name;
}
public getName(): string {
return this.name;
}
}
const person = new Person("Jane");
console.log(person.getName()); // person.name isn't accessible from outside the class since it's private
Hãy tự mình thử »Thuộc tính tham số
TypeScript cung cấp một cách thuận tiện để xác định các thành viên lớp trong hàm tạo, bằng cách thêm bộ điều chỉnh mức độ hiển thị vào tham số.
Ví dụ
class Person {
// name is a private member variable
public constructor(private name: string) {}
public getName(): string {
return this.name;
}
}
const person = new Person("Jane");
console.log(person.getName());
Hãy tự mình thử »Chỉ đọc
Tương tự như mảng, từ khóa readonly có thể ngăn chặn việc thay đổi thành viên của lớp.
Ví dụ
class Person {
private readonly name: string;
public constructor(name: string) {
// name cannot be changed after this initial definition, which has to be either at it's declaration or in the constructor.
this.name = name;
}
public getName(): string {
return this.name;
}
}
const person = new Person("Jane");
console.log(person.getName());
Hãy tự mình thử » Được chứng nhận!
$45 ĐĂNG KÝ
Kế thừa: Thực hiện
Các giao diện (được đề cập ở đây ) có thể được sử dụng để xác định loại mà một lớp phải tuân theo thông qua từ khóa implements .
Ví dụ
interface Shape {
getArea: () => number;
}
class Rectangle implements Shape {
public constructor(protected readonly width: number, protected readonly height: number) {}
public getArea(): number {
return this.width * this.height;
}
}
Hãy tự mình thử »implements , được phân tách bằng dấu phẩy như sau: class Rectangle implements Shape, Colored {Kế thừa: Mở rộng
Các lớp có thể mở rộng lẫn nhau thông qua từ khóa extends . Một lớp chỉ có thể mở rộng một lớp khác.
Ví dụ
interface Shape {
getArea: () => number;
}
class Rectangle implements Shape {
public constructor(protected readonly width: number, protected readonly height: number) {}
public getArea(): number {
return this.width * this.height;
}
}
class Square extends Rectangle {
public constructor(width: number) {
super(width, width);
}
// getArea gets inherited from Rectangle
}
Hãy tự mình thử »Ghi đè
Khi một lớp mở rộng một lớp khác, nó có thể thay thế các thành viên của lớp cha có cùng tên.
Các phiên bản mới hơn của TypeScript cho phép đánh dấu rõ ràng điều này bằng từ khóa override .
Ví dụ
interface Shape {
getArea: () => number;
}
class Rectangle implements Shape {
// using protected for these members allows access from classes that extend from this class, such as Square
public constructor(protected readonly width: number, protected readonly height: number) {}
public getArea(): number {
return this.width * this.height;
}
public toString(): string {
return `Rectangle[width=${this.width}, height=${this.height}]`;
}
}
class Square extends Rectangle {
public constructor(width: number) {
super(width, width);
}
// this toString replaces the toString from Rectangle
public override toString(): string {
return `Square[width=${this.width}]`;
}
}
Hãy tự mình thử »override là tùy chọn khi ghi đè một phương thức và chỉ giúp ngăn việc vô tình ghi đè một phương thức không tồn tại. Sử dụng cài đặt noImplicitOverride để buộc sử dụng nó khi ghi đè.Lớp trừu tượng
Các lớp có thể được viết theo cách cho phép chúng được sử dụng làm lớp cơ sở cho các lớp khác mà không cần phải triển khai tất cả các thành viên. Điều này được thực hiện bằng cách sử dụng từ khóa abstract . Các thành viên không được thực hiện cũng sử dụng từ khóa abstract .
Ví dụ
abstract class Polygon {
public abstract getArea(): number;
public toString(): string {
return `Polygon[area=${this.getArea()}]`;
}
}
class Rectangle extends Polygon {
public constructor(protected readonly width: number, protected readonly height: number) {
super();
}
public getArea(): number {
return this.width * this.height;
}
}
Hãy tự mình thử »