Tiếng Việt

Nền tảng TypeScript

Loại cơ bản của TypeScript

Luồng điều khiển TypeScript

Hàm TypeScript

Giao diện TypeScript

Lớp và Đối tượng TypeScript

Loại Cao Cấp TypeScript

Thao tác trên các kiểu TypeScript

Nhiều loại TypeScript

TypeScript Phụ

TypeScript - Lớp học: Hướng dẫn cho người mới bắt đầu

Xin chào các bạn, những ngôi sao lập trình tương lai! ? Bạn đã sẵn sàng khám phá thế giới thú vị của các lớp trong TypeScript chưa? Đừng lo lắng nếu bạn chưa từng viết một dòng mã nào trước đây - chúng ta sẽ bắt đầu từ những điều cơ bản và dần dần nâng cao. Cuối cùng của bài hướng dẫn này, bạn sẽ có thể tạo ra các lớp như một chuyên gia! Hãy cùng bắt đầu hành trình này nhé.

TypeScript - Classes

Lớp là gì?

Trước khi chúng ta nhảy vào chi tiết, hãy hiểu lớp là gì. Hãy tưởng tượng một lớp như một bản vẽ để tạo ra các đối tượng. Giống như kiến trúc sư sử dụng bản vẽ để xây dựng nhà, chúng ta sử dụng lớp để tạo ra các đối tượng trong mã của mình. Những đối tượng này có thể có các thuộc tính (như màu sắc của một ngôi nhà) và các phương thức (như mở cửa).

Tạo lớp

Hãy bắt đầu bằng cách tạo lớp đầu tiên của chúng ta. Chúng ta sẽ tạo một lớp đơn giản là Car.

class Car {
make: string;
model: string;
year: number;

constructor(make: string, model: string, year: number) {
this.make = make;
this.model = model;
this.year = year;
}

honk() {
console.log("Beep beep!");
}
}

Hãy phân tích này:

  1. Chúng ta bắt đầu với từ khóa class tiếp theo là tên của lớp của chúng ta, Car.
  2. Bên trong lớp, chúng ta định nghĩa các thuộc tính: make, model, và year.
  3. constructor là một phương thức đặc biệt được gọi khi chúng ta tạo một đối tượng mới Car. Nó thiết lập các giá trị ban đầu cho các thuộc tính của chúng ta.
  4. Chúng ta cũng có một phương thức honk mà khi gọi sẽ in ra "Beep beep!" lên console.

Tạo đối tượng thực thể

Bây giờ chúng ta đã có lớp Car, hãy tạo một số đối tượng xe thực tế!

let myCar = new Car("Toyota", "Corolla", 2020);
let yourCar = new Car("Honda", "Civic", 2019);

Ở đây, chúng ta đã tạo ra hai đối tượng Car: myCar và yourCar. Từ khóa new告诉 TypeScript tạo một thể hiện mới của lớp Car.

Truy cập thuộc tính và phương thức

Bây giờ chúng ta đã có các đối tượng xe, làm thế nào để chúng ta sử dụng chúng? Hãy xem:

console.log(myCar.make);  // Xuất: Toyota
console.log(yourCar.year);  // Xuất: 2019

myCar.honk();  // Xuất: Beep beep!

Chúng ta sử dụng dấu chấm để truy cập các thuộc tính và phương thức của các đối tượng. Đó giống như nói, "Hey, myCar! Make của bạn là gì?" hoặc "Hey, myCar! Hãy honk!"

Kế thừa lớp

Kế thừa là một tính năng mạnh mẽ cho phép chúng ta tạo ra các lớp mới dựa trên các lớp hiện có. Hãy tạo một lớp SportsCar kế thừa từ lớp Car của chúng ta:

class SportsCar extends Car {
topSpeed: number;

constructor(make: string, model: string, year: number, topSpeed: number) {
super(make, model, year);
this.topSpeed = topSpeed;
}

race() {
console.log(`Racing at ${this.topSpeed} mph!`);
}
}

let mySpeedster = new SportsCar("Ferrari", "F8", 2021, 210);
mySpeedster.honk();  // Xuất: Beep beep!
mySpeedster.race();  // Xuất: Racing at 210 mph!

Dưới đây là những gì đang xảy ra:

  1. Chúng ta sử dụng từ khóa extends để kế thừa từ Car.
  2. Chúng ta thêm một thuộc tính mới topSpeed.
  3. Trong constructor, chúng ta gọi super() để khởi tạo các thuộc tính từ lớp cha.
  4. Chúng ta thêm một phương thức mới race đặc trưng cho SportsCar.

SportsCar của chúng ta có tất cả các thuộc tính và phương thức của Car, cộng với các bổ sung riêng của nó!

ghi đè phương thức

Đôi khi, chúng ta muốn thay đổi cách một phương thức từ lớp cha hoạt động trong lớp con. Điều này được gọi là ghi đè phương thức. Hãy ghi đè phương thức honk trong lớp SportsCar của chúng ta:

class SportsCar extends Car {
// ... mã trước đó ...

honk() {
console.log("Vroom vroom!");
}
}

mySpeedster.honk();  // Xuất: Vroom vroom!

Bây giờ khi chúng ta gọi honk() trên một SportsCar, nó sẽ phát ra một âm thanh thể thao hơn!

Từ khóa static

Từ khóa static cho phép chúng ta tạo ra các thuộc tính và phương thức thuộc về lớp itself, không phải là các thể hiện của lớp. Hãy thêm một phương thức tĩnh vào lớp Car của chúng ta:

class Car {
// ... mã trước đó ...

static numberOfWheels() {
return 4;
}
}

console.log(Car.numberOfWheels());  // Xuất: 4

Chúng ta có thể gọi phương thức này trên lớp Car itself, mà không cần tạo một thể hiện.

Оператор instanceof

Оператор instanceof cho phép chúng ta kiểm tra xem một đối tượng có phải là thể hiện của một lớp cụ thể hay không:

console.log(myCar instanceof Car);  // Xuất: true
console.log(mySpeedster instanceof SportsCar);  // Xuất: true
console.log(mySpeedster instanceof Car);  // Xuất: true
console.log(myCar instanceof SportsCar);  // Xuất: false

Điều này rất hữu ích khi bạn cần kiểm tra loại đối tượng bạn đang làm việc với.

ẩn dữ liệu

Trong TypeScript, chúng ta có thể sử dụng các修饰符 truy cập để kiểm soát tính khả见 của các thành viên lớp. Ba修饰符 truy cập là public, private, và protected:

class BankAccount {
private balance: number;

constructor(initialBalance: number) {
this.balance = initialBalance;
}

public deposit(amount: number) {
this.balance += amount;
}

public withdraw(amount: number) {
if (amount <= this.balance) {
this.balance -= amount;
} else {
console.log("Insufficient funds!");
}
}

protected getBalance() {
return this.balance;
}
}
  • private: Chỉ có thể truy cập trong lớp.
  • public: Có thể truy cập từ mọi nơi (mặc định nếu không chỉ định).
  • protected: Có thể truy cập trong lớp và các lớp con.

Lớp và Interface

Các interface trong TypeScript cho phép chúng ta định nghĩa một hợp đồng cho các lớp của chúng ta. Hãy tạo một interface cho lớp Car của chúng ta:

interface Vehicle {
make: string;
model: string;
year: number;
honk(): void;
}

class Car implements Vehicle {
// ... triển khai ...
}

Bằng cách thực hiện một interface, chúng ta đảm bảo rằng lớp của chúng ta tuân theo một cấu trúc cụ thể.

Tóm tắt phương thức

Dưới đây là tóm tắt các phương thức chúng ta đã xem xét trong hướng dẫn này:

Phương thức Mô tả
constructor() Khởi tạo một thể hiện mới của lớp
honk() Làm xe honk
race() Mô phỏng cuộc đua (cho SportsCar)
static numberOfWheels() Trả về số lượng bánh xe (cho lớp Car)
deposit() Thêm tiền vào tài khoản ngân hàng
withdraw() Loại bỏ tiền khỏi tài khoản ngân hàng
getBalance() Trả về số dư hiện tại của tài khoản ngân hàng

Và thế là bạn đã bước vào thế giới các lớp trong TypeScript. Nhớ rằng, thực hành là cách tốt nhất để trở nên hoàn hảo, vì vậy đừng ngại thử nghiệm với các khái niệm này. Tạo ra các lớp của riêng bạn, kết hợp các tính năng khác nhau và quan trọng nhất, hãy vui vẻ khi lập trình! Ai biết được, có thể bạn sẽ là người dạy bài này lần sau! ?

Credits: Image by storyset

Hướng Dẫn Trước:
TypeScript - Mở rộng Giao diện
Hướng Dẫn Tiếp Theo:
TypeScript - Đối tượng