Hướng dẫn readonly trong javascript

• Trung Nguyen

• 13/10/2021

• 4 min read

Từ khóa readonly trong TypeScript

TypeScript có từ khóa readonly làm cho một thuộc tính ở dạng chỉ đọc trong class, type hoặc interface.

Từ khóa readonly được sử dụng để làm cho một thuộc tính ở dạng chỉ đọc. Các thành viên chỉ đọc có thể được truy cập bên ngoài lớp, nhưng giá trị của chúng không thể thay đổi. Vì các thành viên chỉ đọc không thể thay đổi bên ngoài lớp, chúng cần được khởi tạo ngay khi khai báo hoặc được khởi tạo bên trong phương thức khởi tạo của lớp.

class Employee {
    readonly empCode: number;
    empName: string;
    
    constructor(code: number, name: string)     {
        this.empCode = code;
        this.empName = name;
    }
}

let emp = new Employee(10, "John");
emp.empCode = 20; //Compiler Error
emp.empName = 'Bill'; 

Trong ví dụ trên, chúng ta có lớp Employee với hai thuộc tính: empName và empCode. Vì thuộc tính empCode chỉ đọc nên nó có thể được khởi tạo tại thời điểm khai báo hoặc trong phương thức khởi tạo.

Nếu chúng tôi cố gắng thay đổi giá trị empCode sau khi đối tượng đã được khởi tạo, trình biên dịch sẽ hiển thị lỗi biên dịch sau:

error TS2540: Cannot assign to 'empCode' because it is a constant or a read-only property.

Một interface cũng có thể có các thuộc tính chỉ đọc.

interface IEmployee {
    readonly empCode: number;
    empName: string;
}

let empObj:IEmployee = {
    empCode:1,
    empName:"Steve"
}

empObj.empCode = 100; // Compiler Error: Cannot change readonly 'empCode'

Như bạn có thể thấy ở trên, thuộc tính empCode là chỉ đọc, vì vậy chúng ta có thể gán một giá trị tại thời điểm tạo một đối tượng.

Theo cách tương tự, bạn có thể sử dụng Readonly để tạo kiểu chỉ đọc, như được trình bày ở ví dụ bên dưới.

interface IEmployee {
    empCode: number;
    empName: string;
}

let emp1: Readonly = {
    empCode:1,
    empName:"Steve"
}

emp1.empCode = 100; // Compiler Error: Cannot change readonly 'empCode'
emp1.empName = 'Bill'; // Compiler Error: Cannot change readonly 'empName'

let emp2: IEmployee = {
    empCode:1,
    empName:"Steve"
}

emp2.empCode = 100; // OK
emp2.empName = 'Bill'; // OK

Trong ví dụ trên, emp1 được khai báo là Readonly và vì vậy các giá trị không thể thay đổi sau khi khởi tạo.

Từ khóa static trong TypeScript

ES6 bao gồm các thành viên static (tĩnh) và TypeScript cũng vậy. Các thành viên static của một lớp được truy cập bằng cách sử dụng tên lớp và ký hiệu dấu chấm, mà không cần tạo một đối tượng, ví dụ: ..

Các thành viên static có thể được định nghĩa bằng cách sử dụng từ khóa static. Hãy xem ví dụ sau về một lớp có thuộc tính static.

class Circle {
    static pi: number = 3.14;
}

Lớp Circle trên gồm một thuộc tính static là pi. Nó có thể được truy cập bằng cách sử dụng Circle.pi. TypeScript sẽ tạo mã JavaScript sau cho lớp Circle ở trên.

var Circle = /** @class */ (function () {
    function Circle() {
    }
    Circle.pi = 3.14;
    return Circle;
}());

Ví dụ sau định nghĩa một lớp có thuộc tính và phương thức static và cách truy cập nó.

class Circle {
    static pi: number = 3.14;
    
    static calculateArea(radius:number) {
        return this.pi * radius * radius;
    }
}

Circle.pi; // returns 3.14
Circle.calculateArea(5); // returns 78.5

Lớp Circle trên bao gồm một thuộc tính static và một phương thức static. Bên trong phương thức static calculateArea, thuộc tính static có thể được truy cập bằng từ khóa this.pi hoặc sử dụng tên lớp Circle.pi.

Bây giờ, hãy xem ví dụ sau với các thành viên static và thành viên bình thường.

class Circle {
    static pi = 3.14;
    pi = 3;
}

Circle.pi; // returns 3.14

let circleObj = new Circle();
circleObj.pi; // returns 3

Như bạn có thể thấy, các thành viên static và thành viên bình thường có cùng tên có thể tồn tại mà không có bất kỳ lỗi nào. Thành viên static sẽ được truy cập bằng ký hiệu dấu chấm và thành viên bình thường có thể được truy cập bằng cách sử dụng một đối tượng của lớp.

Hãy xem một ví dụ khác.

class Circle {
    static pi = 3.14;

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

    calculateCircumference(radius:number):number { 
        return 2 * Circle.pi * radius;
    }
}

Circle.calculateArea(5); // returns 78.5

let circleObj = new Circle();
circleObj.calculateCircumference(5) // returns 31.4000000
//circleObj.calculateArea(); <-- cannot call this

Trong ví dụ trên, lớp Circle bao gồm phương thức static là calculateArea và phương thức bình thường là calculateCircumference. Như bạn thấy, thành viên static pi có thể được truy cập trong phương thức static bằng cách sử dụng this.pi và trong phương bình thường bằng cách sử dụng Circle.pi.

Trong TypeScript: lớp hoặc hàm khởi tạo không thể sử dụng từ khóa static.

Nếu Comdy hữu ích và giúp bạn tiết kiệm thời gian

Bạn có thể vui lòng tắt trình chặn quảng cáo ❤️ để hỗ trợ chúng tôi duy trì hoạt động của trang web.