TYPESCRIPT 2.X CĂN BẢN
Hàm trong TypeScript Sử dụng hàm generics Sử dụng hàm generics trong TypeScript Sử dụng Array trong TypeScript Sử dụng Tuple trong TypeScript Sử dụng kiểu Array, Tuple, Enum trong TypeScript Interface trong Typescript Hybrid Types với Interface trong TypeScript Khác biệt khi sử dụng 'type' và 'interface' trong TypeScript Cách dùng Enum trong TypeScript Types và interface trong TypeScript Class trong TypeScript Sử dụng Abstract Classes trong TypeScript Sử dụng Interface trong Typescript (phần 2) Sử dụng Casting trong TypeScript Tìm hiểu về Generics trong TypeScript Tìm hiểu về utility types trong Typescript Utility types phổ biến trong Typescript Sử dụng default parameters trong TypeScript Modules trong TypeScript Rest Parameters trong TypeScript Sử dụng Function Overloadings trong TypeScript Sử dụng Type Assertions trong TypeScript Sử dụng Static Methods và Properties trong TypeScript. Sử dụng Access Modifiers trong TypeScript 10 mẹo và thủ thuật hay nhất trong TypeScript 5 Cách giúp bạn loại bỏ "any" trong TypeScript Mapped Types trong TypeScript Dependency Injection trong Typescript 5 ký hiệu khó hiểu cần biết trong TypeScript Cách sử dụng @ts-expect-error trong Typescript Declaration Merging trong TypeScript Tìm hiểu Branded Type trong TypeScript Namespaces trong Typescript Phân biệt Modules và Namespaces trong TypeScript Triple-Slash Directives trong TypeScript là gì? Phần 1: Biến trong TypeScript Phần 2: Biến trong TypeScript Property trong TypeScript Phân tích JSON trong TypeScript Bài tập TypeScript: Các dạng bài tập cơ bản Bài tập TypeScript: Lập trình Hướng đối tượng trong TypeScript Bài tập TypeScript: Kiểu Generic Types trong Typescript Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple. Bài tập TypeScript: Classes và Inheritance trong Typescript Bài 01: TypeScript là gì? TypeScript và Javascript Bài 02: Cài đặt TypeScript Bài 03: TypeScript Basic Types Bài 04: Khai báo biến trong TypeScript Bài 05: Lệnh If Else và Switch Case trong TypeScript Bài 06: Vòng lặp trong TypeScript
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
MỚI CẬP NHẬT

Class trong TypeScript

Class là một phần quan trọng của lập trình hướng đối tượng (OOP), giúp bạn đóng gói dữ liệu và hành vi vào một đơn vị độc lập.

test php

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Trong phần này, mình sẽ tìm hiểu về Class trong TypeScript, bao gồm cách định nghĩa, tạo ra các đối tượng từ Class, và các tính năng khác mà TypeScript cung cấp để làm cho việc sử dụng Class trở nên mạnh mẽ và linh hoạt. Mình sẽ thấy cách Class có thể được kế thừa, cách sử dụng access modifiers để bảo vệ dữ liệu, và nhiều khía cạnh khác của việc sử dụng Class trong TypeScript.

Class trong TypeScript là gì?

t E1 BA A3i 20xu E1 BB 91ng jpg

Trong TypeScript, Class là một cấu trúc được sử dụng để định nghĩa một mô hình cho các đối tượng. Nó chứa các thuộc tính (properties) và phương thức (methods) mà các đối tượng của Class sẽ chia sẻ. Class là một khái niệm quan trọng trong lập trình hướng đối tượng (OOP) cho phép bạn đóng gói dữ liệu và hành vi vào một đơn vị độc lập.

Mục tiêu và lợi ích của việc sử dụng Class trong TypeScript:

Bài viết này được đăng tại [free tuts .net]

  • Tổ chức mã nguồn: Class giúp tổ chức mã nguồn một cách cấu trúc và dễ quản lý. Bạn có thể nhóm các thuộc tính và phương thức liên quan lại với nhau trong một Class, làm cho mã nguồn dễ đọc hơn.

  • Đóng gói dữ liệu và hành vi: Class cho phép bạn đóng gói dữ liệu (properties) và hành vi (methods) liên quan lại với nhau. Điều này giúp bạn giữ cho dữ liệu ẩn kín khỏi sự can thiệp từ bên ngoài và chỉ cho phép truy cập thông qua phương thức mà bạn định nghĩa.

  • Tạo đối tượng: Class cho phép bạn tạo ra nhiều đối tượng (instances) từ cùng một mô hình. Điều này giúp bạn tái sử dụng mã nguồn và tạo ra nhiều đối tượng có cùng cấu trúc.

  • Kế thừa và mở rộng: Class hỗ trợ kế thừa, cho phép bạn xây dựng các Class mới dựa trên một Class hiện có. Điều này giúp tái sử dụng mã nguồn và mở rộng tính năng của Class cha.

  • Tạo giao tiếp rõ ràng: Sử dụng Class, bạn có thể xác định các giao diện (interface) cho đối tượng, làm cho cách mà đối tượng tương tác với nhau trở nên rõ ràng và dễ bảo trì.

  • Bảo vệ dữ liệu: Access modifiers (public, private, protected) trong Class cho phép bạn kiểm soát việc truy cập đến thuộc tính và phương thức, bảo vệ dữ liệu khỏi sự thay đổi không mong muốn.

Việc sử dụng Class trong TypeScript giúp tạo ra mã nguồn có cấu trúc, rõ ràng và dễ bảo trì, đồng thời thúc đẩy việc áp dụng các nguyên tắc của lập trình hướng đối tượng.

Định nghĩa và Tạo Class

Cú pháp cơ bản để định nghĩa Class

Trong TypeScript, bạn có thể định nghĩa Class bằng cú pháp sau:

class TenClass {
    // Các thuộc tính (properties) của Class
    tenThuocTinh: kieuDuLieu;
    
    // Constructor để khởi tạo đối tượng
    constructor(thamSo1: kieuDuLieu1, thamSo2: kieuDuLieu2) {
        this.tenThuocTinh = thamSo1;
        // Khởi tạo các thuộc tính khác ở đây
    }

    // Các phương thức (methods) của Class
    tenPhuongThuc() {
        // Cài đặt phương thức ở đây
    }
}

Constructor và khởi tạo đối tượng

Constructor là một phương thức đặc biệt trong Class, được sử dụng để khởi tạo đối tượng khi nó được tạo. Bạn có thể truyền các tham số vào Constructor để khởi tạo các thuộc tính của đối tượng.

Thuộc tính (Properties) của Class

Thuộc tính (properties) là các biến để lưu trữ dữ liệu của đối tượng. Chúng được khai báo trong Class và có thể truy cập thông qua các đối tượng của Class.

Phương thức (Methods) của Class

Phương thức (methods) là các hàm được định nghĩa trong Class, cho phép đối tượng thực hiện các hành động hoặc tính toán. Chúng có thể truy cập và thao tác với thuộc tính của đối tượng.

Ví dụ:

Dưới đây là một ví dụ cụ thể về việc định nghĩa và tạo Class trong TypeScript:

class NhanVien {
    ten: string;
    tuoi: number;

    constructor(ten: string, tuoi: number) {
        this.ten = ten;
        this.tuoi = tuoi;
    }

    thongTinNhanVien() {
        console.log(`Tên: ${this.ten}, Tuổi: ${this.tuoi}`);
    }
}

const nhanVien1 = new NhanVien("Alice", 30);
nhanVien1.thongTinNhanVien(); // In ra "Tên: Alice, Tuổi: 30"

Trong ví dụ này, mình đã định nghĩa Class NhanVien với các thuộc tính ten tuoi, Constructor để khởi tạo đối tượng, và phương thức thongTinNhanVien để hiển thị thông tin của nhân viên. Sau đó, mình đã tạo một đối tượng nhanVien1 từ Class này và gọi phương thức thongTinNhanVien để in ra thông tin.

Kế thừa và giao tiếp

Kế thừa (Inheritance) trong Class

Kế thừa là một tính năng quan trọng của lập trình hướng đối tượng cho phép bạn xây dựng một Class mới dựa trên một Class đã tồn tại. Class mới sẽ thừa hưởng các thuộc tính và phương thức của Class cha và có thể mở rộng hoặc ghi đè chúng.

Ví dụ:

class DongVat {
    ten: string;

    constructor(ten: string) {
        this.ten = ten;
    }

    keu() {
        console.log("Dong vat keu...");
    }
}

class ConMeo extends DongVat {
    keu() {
        console.log("Meo keu: Meo Meo!");
    }
}

const meo = new ConMeo("Mèo Kitty");
meo.keu(); // In ra "Meo keu: Meo Meo!"

Trong ví dụ này, Class ConMeo kế thừa từ Class DongVat và ghi đè phương thức keu để thay đổi cách mà mèo kêu. Khi mình tạo một đối tượng meo từ Class ConMeo và gọi phương thức keu, nó sẽ thực hiện phương thức keu của Class ConMeo.

Sử dụng Interface để định nghĩa giao tiếp (Interface trong Class)

Interface là một cách để định nghĩa giao tiếp cho đối tượng. Bạn có thể sử dụng Interface để đảm bảo rằng các đối tượng của Class tuân theo các quy tắc giao tiếp cụ thể.

Ví dụ:

interface DiChuyen {
    diChuyen(): void;
}

class XeHoi implements DiChuyen {
    diChuyen() {
        console.log("Xe hơi di chuyển bằng bánh xe.");
    }
}

class MayBay implements DiChuyen {
    diChuyen() {
        console.log("Máy bay di chuyển bằng cánh quạt.");
    }
}

const xeHoi = new XeHoi();
const mayBay = new MayBay();

xeHoi.diChuyen(); // In ra "Xe hơi di chuyển bằng bánh xe."
mayBay.diChuyen(); // In ra "Máy bay di chuyển bằng cánh quạt."

Trong ví dụ này, mình đã định nghĩa một Interface DiChuyen với một phương thức diChuyen. Cả Class XeHoi MayBay đều tuân theo Interface này và triển khai phương thức diChuyen. Mình có thể tạo đối tượng từ cả hai Class và gọi phương thức diChuyen để xác định cách mà chúng di chuyển.

Access Modifiers và Encapsulation

Public, Private, và Protected Access Modifiers

Access modifiers là các từ khóa được sử dụng trong TypeScript để kiểm soát quyền truy cập đối với thuộc tính và phương thức của một Class.

  • Public: Mặc định, tất cả thuộc tính và phương thức trong một Class là public, có nghĩa là chúng có thể được truy cập từ bên ngoài Class.

  • Private: Thuộc tính hoặc phương thức được đánh dấu là private chỉ có thể được truy cập từ bên trong Class. Điều này giúp bảo vệ dữ liệu và hành vi khỏi sự can thiệp bên ngoài.

  • Protected: Thuộc tính hoặc phương thức được đánh dấu là protected có thể được truy cập từ bên trong Class và các Class con (Class kế thừa).

Ví dụ:

class Employee {
    public name: string;
    private salary: number;
    protected id: number;

    constructor(name: string, salary: number, id: number) {
        this.name = name;
        this.salary = salary;
        this.id = id;
    }

    displayInfo() {
        console.log(`Name: ${this.name}, Salary: ${this.salary}`);
    }
}

class Manager extends Employee {
    constructor(name: string, salary: number, id: number) {
        super(name, salary, id);
    }

    displayEmployeeInfo() {
        console.log(`ID: ${this.id}`);
    }
}

const employee = new Employee("Alice", 50000, 12345);
console.log(employee.name); // OK
// console.log(employee.salary); // Lỗi vì salary là private
// console.log(employee.id); // Lỗi vì id là protected

const manager = new Manager("Bob", 60000, 54321);
console.log(manager.name); // OK
// console.log(manager.salary); // Lỗi vì salary là private
console.log(manager.id); // OK

Encapsulation và Bảo vệ Dữ Liệu

Encapsulation là nguyên tắc của OOP cho phép đóng gói dữ liệu và hành vi liên quan vào một đơn vị độc lập. Bằng cách sử dụng access modifiers, bạn có thể bảo vệ dữ liệu bên trong Class khỏi sự can thiệp trái phép từ bên ngoài.

Static Members và Abstract Classes

Static properties và methods

Static members là các thuộc tính và phương thức thuộc về Class chứ không phải đối tượng cụ thể. Chúng có thể được truy cập bằng cách sử dụng tên Class thay vì đối tượng.

Ví dụ:

class MathUtility {
    static PI: number = 3.14159;

    static calculateArea(radius: number): number {
        return this.PI * radius * radius;
    }
}

console.log(MathUtility.calculateArea(5)); // In ra 78.53975

Abstract Classes và Kế thừa từ Abstract Classes

Abstract Class là một Class trừu tượng mà không thể tạo đối tượng trực tiếp. Nó được sử dụng như một bản thiết kế cho các Class con. Class con phải triển khai các phương thức trừu tượng của Class cha.

Ví dụ:

abstract class Shape {
    abstract calculateArea(): number;
}

class Circle extends Shape {
    constructor(private radius: number) {
        super();
    }

    calculateArea(): number {
        return Math.PI * this.radius * this.radius;
    }
}

const circle = new Circle(5);
console.log(circle.calculateArea()); // In ra 78.53975

Trong ví dụ này, Shape là một Abstract Class với phương thức trừu tượng calculateArea. Class Circle kế thừa từ Shape và triển khai phương thức calculateArea.

Getter và Setter

Sử dụng Getter để lấy giá trị thuộc tính

Getter là một phương thức đặc biệt trong Class, được sử dụng để lấy giá trị của một thuộc tính. Getter có thể giúp bạn kiểm soát quyền truy cập và xử lý dữ liệu trước khi trả về giá trị.

Ví dụ:

class Person {
    private _age: number;

    constructor(age: number) {
        this._age = age;
    }

    get age(): number {
        return this._age;
    }
}

const person = new Person(30);
console.log(person.age); // In ra 30

Trong ví dụ này, mình đã sử dụng Getter age để lấy giá trị của thuộc tính _age. Điều này giúp kiểm soát quyền truy cập vào thuộc tính _age.

Sử dụng Setter để thiết lập giá trị thuộc tính

Setter là một phương thức đặc biệt được sử dụng để thiết lập giá trị của một thuộc tính. Tương tự như Getter, Setter cũng cho phép bạn kiểm soát quyền truy cập và thực hiện xử lý trước khi thiết lập giá trị.

Ví dụ:

class Person {
    private _age: number;

    constructor(age: number) {
        this._age = age;
    }

    get age(): number {
        return this._age;
    }

    set age(value: number) {
        if (value >= 0) {
            this._age = value;
        }
    }
}

const person = new Person(30);
person.age = 35; // Gọi Setter
console.log(person.age); // In ra 35

person.age = -5; // Gọi Setter, nhưng không thay đổi giá trị vì kiểm tra điều kiện
console.log(person.age); // Vẫn in ra 35

Trong ví dụ này, mình đã sử dụng Setter age để kiểm tra giá trị trước khi thiết lập nó vào thuộc tính _age. Nếu giá trị hợp lệ, nó sẽ được thiết lập; ngược lại, nó sẽ bị bỏ qua.

Ví dụ minh họa

Dưới đây là một ví dụ về việc định nghĩa và sử dụng Class trong TypeScript:

class Animal {
    private _name: string;

    constructor(name: string) {
        this._name = name;
    }

    get name(): string {
        return this._name;
    }

    set name(value: string) {
        this._name = value;
    }

    makeSound(sound: string) {
        console.log(`${this._name} makes a sound: ${sound}`);
    }
}

class Dog extends Animal {
    constructor(name: string) {
        super(name);
    }

    makeSound(sound: string) {
        console.log(`${this.name} barks: ${sound}`);
    }
}

const animal = new Animal("Fido");
console.log(animal.name); // In ra "Fido"
animal.makeSound("Woof!");

const dog = new Dog("Buddy");
console.log(dog.name); // In ra "Buddy"
dog.makeSound("Woof!");

Trong ví dụ này, mình đã định nghĩa Class Animal với Getter và Setter cho thuộc tính _name, sau đó tạo một Class con Dog kế thừa từ Animal. Mình đã sử dụng Getter và Setter để truy cập và thiết lập giá trị _name và viết phương thức makeSound cho cả hai Class. Sau đó, mình đã tạo đối tượng từ cả hai Class và gọi phương thức makeSound để hiển thị cách mỗi loài thú kêu.

Kết Bài

Trong TypeScript, Class là một khía cạnh quan trọng của lập trình hướng đối tượng, cho phép bạn định nghĩa cấu trúc dữ liệu và hành vi của đối tượng. Class cho phép bạn sử dụng các tính năng như access modifiers, inheritance, encapsulation, static members, abstract classes, getter, setter để quản lý và kiểm soát dữ liệu và hành vi.

Mục tiêu của bài viết này là giúp bạn hiểu rõ về khái niệm và cú pháp cơ bản của Class trong TypeScript, cũng như cách sử dụng nó trong thực tế. Với kiến thức về Class, bạn có thể xây dựng các ứng dụng phức tạp hơn và quản lý mã nguồn một cách hiệu quả hơn. Hy vọng rằng bạn đã tìm thấy thông tin trong bài viết này hữu ích cho việc phát triển ứng dụng TypeScript của mình.

Cùng chuyên mục:

Bài tập TypeScript: Classes và Inheritance trong Typescript

Bài tập TypeScript: Classes và Inheritance trong Typescript

Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple.

Bài tập TypeScript: Các kiểu dữ liệu mảng và tuple.

Bài tập TypeScript: Kiểu Generic Types trong Typescript

Bài tập TypeScript: Kiểu Generic Types trong Typescript

Bài tập TypeScript: Lập trình Hướng đối tượng trong TypeScript

Bài tập TypeScript: Lập trình Hướng đối tượng trong TypeScript

Bài tập TypeScript: Các dạng bài tập cơ bản

Bài tập TypeScript: Các dạng bài tập cơ bản

Phân tích JSON trong TypeScript

Phân tích JSON trong TypeScript

Property trong TypeScript

Property trong TypeScript

Phần 2: Biến trong TypeScript

Phần 2: Biến trong TypeScript

Phần 1: Biến trong TypeScript

Phần 1: Biến trong TypeScript

Triple-Slash Directives trong TypeScript là gì?

Triple-Slash Directives trong TypeScript là gì?

Phân biệt Modules và Namespaces trong TypeScript

Phân biệt Modules và Namespaces trong TypeScript

Tìm hiểu Branded Type trong TypeScript

Tìm hiểu Branded Type trong TypeScript

Namespaces trong Typescript

Namespaces trong Typescript

Declaration Merging trong TypeScript

Declaration Merging trong TypeScript

Cách sử dụng @ts-expect-error trong typescript

Cách sử dụng @ts-expect-error trong typescript

5 ký hiệu khó hiểu cần biết trong TypeScript

5 ký hiệu khó hiểu cần biết trong TypeScript

Dependency Injection trong Typescript

Dependency Injection trong Typescript

Mapped Types trong TypeScript

Mapped Types trong TypeScript

5 Cách giúp bạn loại bỏ

5 Cách giúp bạn loại bỏ "any" trong TypeScript

10 mẹo và thủ thuật hay nhất trong TypeScript

10 mẹo và thủ thuật hay nhất trong TypeScript

Top