Class trong TypeScript hướng dẫn lập trình với class trong typescript. Bao gồm: tạo class, constructor, access modifier, extends…
Class trong typecript là gì
Class trong typescript là một cách thức mô tả các biến có cấu trúc phức tạp, Class được tạo ra để khai báo các cấu trúc dành cho việc tạo các biến sau này. Khi tạo class, bạn sẽ khai báo nhiều thuộc tính (còn gọi là property) và nhiều hàm (method, còn gọi là các hành động) làm mẫu cho các biến sẽ tạo theo class.
Ví dụ sau là tạo 1 class tên khachhang, có 3 thuộc tính ho, ten và ngaysinh, có 2 method là tuoi() và hoten()
class khachhang { ho:string; ten:string; ngaysinh:string; tuoi(){ } hoten() { } }
Contructor của class
Trong class, constructor là một hàm đặc biệt. Nếu bạn có khai báo hàm có tên constructor trong class thì hàm này sẽ chạy tự động khi 1 biến được tạo ra, Tức khi bạn tạo biến bằng từ khóa new
class chó { ten:string; màulông:string; constructor() { console.log("Gâu gâu"); } } let c1 = new chó; // contructor chạy ngay khi new đối tượng
Từ khóa this trong class
Trong các hàm của class, bạn có thể dùng từ khóa this – đây là từ khóa diễn tả “đối tượng hiện hành”. Mỗi khi cần truy xuất đến thuộc tính của class thì dùng từ khóa this. Ví dụ:
class nhanvien { ho: string; ten:string; hoten() { return this.ho + " " + this.ten} } let nv1 = new nhanvien; nv1.ho = "Hạnh"; nv1.ten = "Phúc"; console.log( nv1.hoten() ); //Hạnh Phúc
Tạo đối tượng theo class
class sanpham {
id:number;
ten:string;
usd: number;
status: number = 1;
constructor(id:number, ten:string, gia:number){
this.id = id;
this.ten = ten;
this.usd = gia;
}
tienvn(){ return this.usd*25000;}
trangthai(){return (this.status==1)?"Hàng mới":"Hàng cũ";}
}
Việc tạo 1 biến theo class rất đơn giản: dùng từ khóa new như sau:
let sp1 = new sanpham(3, "Gạo ST25", 25000);
console.log(sp1);
Class là hình mẫu cho các biến sẽ tạo. Biến được tạo theo class sẽ có cấu trúc đúng như khai báo trong class. Do đó class sanpham sẽ có các thuộc tính id, ten, usd, status, tienvn(), trangthai(). Biến này còn gọi là đối tượng, là 1 instance của class.
Chú ý: Khi dùng từ khóa new để tạo biến, các tham số sẽ được đưa vào cho hàm construtor() sử dụng.
Các cấp độ truy xuất – access modifier
Các thành phần trong class là property và method có thể được chỉ định truy xuất ở các cấp độ khác nhau. Sau đây là một các access modifier (cấp độ truy xuất) trong TypeScript: public, private , protected, readonly
Public
Đây là cấp độ truy xuất mặc định cho các property và method trong class TypeScript. Public cho phép truy xuất ở trong class cũng như ngoài class, không có giới hạn. Mời xem ví dụ sau:
class nhanvien { public ho: string; ten:string; hoten() { return this.ho + " " + this.ten} } let nv1 = new nhanvien; nv1.ho = "Hạnh"; //OK nv1.ten = "Phúc";
Trong ví dụ trên, ho được khai báo là public . Còn ten thì không có khai báo gì, như vậy cũng được xem là public. Cả 2 đều có thể được truy xuất từ bên ngoài class.
Private
Trong class, thuộc tính và hàm nào được chỉ định cấp độ truy xuất là private thì nó chỉ có thể được sử dụng trong class mà thôi, không thể truy xuất được bên ngoài class chứa nó.
class nhanvien { public hoten: string; private ngaycong: number; luong() { return this.ngaycong*500000;} //ok } let nv1 = new nhanvien; nv1.ngaycong = 10000000; //lỗi
Trong ví dụ trên, ngaycong được chỉ định cấp độ truy xuất là private. Cho nên khi tạo đối tượng và truy xuất thông qua đối tượng (bên ngoài class) sẽ gặp lỗi. Còn như truy xuất đến ngaycong trong hàm luong (bên trong class) thì không sao.
Protected
Đây là cấp độ truy xuất chỉ có thể truy xuất từ bên trong class hoặc từ các class con. Bên ngoài class truy xuất không được
class nhanvien { private ngaycong: number; protected thuong:number luong() { return this.ngaycong*500000+this.thuong; } } class nhanvienKD extends nhanvien { thunhap() { return this.luong() + this.thuong*2; } } let nv1 = new nhanvienKD; nv1.thuong = 500000; //lỗi
Trong ví dụ trên, cấp độ truy xuất là protected cho thuong . Cho nên có thể truy xuất đến nó từ trong hàm luong của class nhanvien và từ trong class con nhanvienKD. Nhưng khi tạo đối tượng và truy xuất từ ngoài class thì không được.
Readonly
Cái này để đánh dấu 1 property trong class là chỉ đọc được từ ngoài class nhưng không gán được. Vì lý do này mà bạn cần khởi tạo giá trị cho property trong hàm constructor của class
class nhanvien { hoten:string; readonly luong: number; constructor(ht:string, l:number){ this.hoten=ht; this.luong = l; } } let nv1 = new nhanvien("Tèo", 8000000); nv1.luong = 500000; //lỗi
Trong ví dụ trên, luong gán bên ngoài class sẽ bị lỗi ngay. Do bên ngoài không thể gán cho nên với những thuộc tính readonly, bạn phải tạo hàm trong class để gán giá trị cho nó, dùng hàm constructor hoặc tạo hàm khác trong class để gán cũng được.
Kế thừa – Inheritance
Mỗi class trong TypeScript có thể kế thừa từ 1 class cha. Thực hiện bằng cách dùng dùng từ khóa extends khi tạo . Class con kế thừa tất cả thuộc tính và hàm của class cha ngoại trừ những cái private và contructor. Ví dụ:
class KhachVIP extends khachhang{ diem:number; } let k1 = new KhachVIP(); console.log(k1);
Trong class con nếu có hàm constructor thì phải gọi hàm constructor của cha cho bằng cách sử dụng hàm super() trướckhichạy code trong class con.
class sảnphẩmlỗi extends sanpham { môtảlỗi: string; constructor(id:number, ten:string, gia:number, mota:string){ super(id, ten, gia); this.môtảlỗi = mota; } } let sploi = new sảnphẩmlỗi(7,"Ly S12",85000,"Mẻ nhỏ ở đáy ly"); console.log(sploi);
Static
Trong class, thành viên nào (property, method) được chỉ định static , tức có từ khóa static ở trước thì sẽ được truy xuất bằng cách dùng cú pháp classname.ten mà không cần đến việc tạo đối tượng.
class HinhTron { static pi: number = 3.14; static dientich(bankinh:number) { console.log( HinhTron.pi, this.pi );//3.14 3.14 return this.pi * Math.pow(bankinh,2) ; } }//class console.log( HinhTron.pi ) ; // 3.14 console.log( HinhTron.dientich(2) ); //12.56
Trong ví vụ trên, class HinhTron có 2 static member là pi và dientich. Trong static method dientich thì vẫn truy xuất pi dùng từ khóa this bình thường , hoặc theo cú pháp HinhTron.pi cũng được
Static member khác với public member. Do đó chúng có thể giống tên nhau trong class. Static không thể truy xuất thông qua đối tượng là instance của class cỏn public member thì được.
class HinhTron { static pi = 3.14; public pi = 314; static tacgia="Tèo"; } console.log(HinhTron.pi);//3.14 let ht1 = new HinhTron; console.log( ht1.pi ); //314 console.log( ht1.tacgia ); //lỗi
Lớp trừu trượng – abstract class
Lớp trừu tượng được tạo bằng từ khóa abstract. Mục đích của việc tạo lớp trừu tượng là để làm mẫu cho các lớp con kế thừa mà không cần code cụ thể. Với lớp trừu tượng thì không tạo được biến instance
Một lớp trừu tượng thường là nơi khai kháo tên và tham số cho các method trừu tượng hoặc các property. Các lớp con bắt buộc phải định nghĩa các methods trừu tượng
Cần tra cứu thêm tài liệu, các em xem ở đây nhé :
- https://www.typescriptlang.org/docs/handbook/2/classes.html
- https://www.w3schools.com/typescript/typescript_classes.php