Đối với các ngôn ngữ hướng đối tượng thông thường, static không còn là khái niệm gì xa lạ. Nhờ vào ES6, static đã được thêm vào cho JavaScript để sử dụng các thuộc tính các phương thức một cách linh hoạt hơn. TypeScript cũng không phải là ngoại lệ. Hôm nay chúng ta sẽ cùng nhau tìm hiểu về static trong TypeScript nhé.

Static trong TypeScript

Trong TypeScript, keyword static được dùng để khởi tạo các thuộc tính tĩnh (static properties) và phương thức tĩnh (static methods) của một class. Các phương thức và thuộc tính tĩnh này có thể được gọi trực tiếp từ class sau khi đã khai báo mà không cần phải khởi tạo các đối tượng từ class đó. Chúng ta đi vào ví dụ cụ thể sau nhé

class Employee {
	readonly name: string;
	age: number;
	static companyInfo = 'yeulaptrinh.vn';

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

	getName (): string 	{ 
		return this.name; 
	}

	static getCompanyInfo (): string {
		return this.companyInfo;
	}

}

console.log(Employee.age) // Property 'age' does not exist on type 'typeof Employee'.
console.log(Employee.getName()) // Property 'getName' does not exist on type 'typeof Employee'.
console.log(Employee.companyInfo) // yeulaptrinh.vn

Từ ví dụ trên, chúng ta có thể thấy, chúng ta đã khai báo static property là companyInfo và staticmethod là getCompanyInfo cùng với static và chúng ta có thể truy cập chúng trực tiếp với class Employee mà không cần khởi tạo object cùng new từ chúng.

Sử dụng static trong TypeScript

console.log(Employee) 
// [Function: Employee] {
  getCompanyInfo: [Function (anonymous)],
  companyInfo: 'yeulaptrinh.vn'
}

Khi log thử class Employee ở trên sau khi khởi tạo, chúng ta có thể thấy class của chúng ta có hai thuộc tính là getCompanyInfo và companyInfo, đó là lý do vì sao chúng ta có thể gọi các static bằng cách sử dụng “.” ( Employee.getCompanyInfo() , Employee.companyInfo). Cùng xem kết quả sau khi compile sang JavaScript

var Employee = /** @class */ (function () {
    function Employee(name, age) {
        this.name = name;
        this.age = age;
    }
    ;
    Employee.prototype.getName = function () {
        return this.name;
    };
    Employee.getCompanyInfo = function () {
        return this.companyInfo;
    };
    Employee.companyInfo = 'yeulaptrinh.vn';
    return Employee;
}());

Trong một class, các thuộc tính nonstatic và static có thể trùng tên của nhau mà không gây ảnh hưởng gì tới nhau.

class Employee {
	name: string;
	companyInfo: string;
	static companyInfo = 'yeulaptrinh.vn';

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

	getCompanyInfo () : string {
		return this.companyInfo
	}

	static getCompanyInfo (): string {
		return this.companyInfo;
	}

}

let empl = new Employee('yeulaptrinh academy')

console.log(Employee.getCompanyInfo()) // yeulaptrinh.vn
console.log(empl.getCompanyInfo()) // yeulaptrinh academy

Trong class, từ khoá this nếu sử dụng trong các nonstatic method thì nó sẽ gọi đến các nonstatic properties, ngược lại nếu sử dụng trong các static method thì nó sẽ gọi tới các static property

	static getName(): string {
		return this.name // Property 'name' does not exist on type 'typeof Employee'.
	}

Nếu một class kế thừa class chứa Static properties thì như thế nào nhỉ, chúng ta cùng đi vào ví dụ

class Employee {
	readonly name: string;
	age: number;
	static companyInfo = 'yeulaptrinh.vn';

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

	getName (): string 	{ 
		return this.name; 
	}

	static getCompanyInfo (): string {
		return this.companyInfo;
	}

}

class Engineer extends Employee {

}

console.log(Engineer.companyInfo) // 'yeulaptrinh.vn'

Như vậy, các class con kế thừa từ class cha đều nhận các thuộc tính static từ cha.

var Employee = /** @class */ (function () {
    function Employee(name, age) {
        this.name = name;
        this.age = age;
    }
    ;
    Employee.prototype.getName = function () {
        return this.name;
    };
    Employee.getCompanyInfo = function () {
        return this.companyInfo;
    };
    Employee.companyInfo = 'yeulaptrinh.vn';
    return Employee;
}());

var Engineer = /** @class */ (function (_super) {
    __extends(Engineer, _super);
    function Engineer() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    return Engineer;
}(Employee));

Summary

Bài viết này chúng mình đã đề cập tới các vấn đề cơ bản nhất liên quan đến static trong TypeScript, hi vọng bài viết sẽ giúp ích cho các bạn trong quá trình học và nghiên cứu đến TypeScript. Các bạn có thể tham khảo thêm bài viết khác của chúng mình tại đây. Rất mong nhận được sự đóng góp của các bạn để chúng mình hoàn thiện bài viết hơn