Interface trong typescript hướng dẫn sử dụng interface trong typescript. Như cách khai báo. Interface với type, function, array, class…
Interface trong typescript
- Giới thiệu interface trong typescript
- Dùng interface để định nghĩa type mới
- Dùng interface như là 1 kiểu hàm – function type
- Sử dụng interface tạo array type
- Thuộc tính tùy chọn – Optional Property
- Thuộc tính read only trong interface
- Extending Interface
- Sử dụng interface cho class
Giới thiệu interface trong typescript
Trong TypeScript, sử dụng interface là cách khai báo trước cấu trúc cần phải có cho các class, các function, các biến…
TypeScript không biên dịch interface sang mã JavaScript. Typescript chỉ dùng interface cho mục đích hỗ trợ kiểm tra kiểu vả cấu trúc của các biến, function, class … sử dụng theo interface được chính xác.
Mỗi interface được định nghĩa với từ khóa interface. Khi định nghĩa, bạn khai báo các property và method. Method thì có thể dùng kiểu function thông thường hoặc arrow function đều được. Ví dụ:
interface IMonAn {
id:number;
tenMon: string;
gia:number;
khuyenmai: (number) => number;
vitri(number): string;
}
Trong ví dụ trên, IMonAn là interface có 3 thuộc tính và 2 hàm. Trong đó khuyenmai là hàm mũi tên còn vitri là hàm thông thường. Các đối tượng nào được định nghĩa theo interface này phải có 3 thuộc tính và 2 hàm đã khai báo.
Dùng interface để định nghĩa type mới
Trong TypeScript , interface có thể dùng để định nghĩa 1 kiểu dữ liệu (type) mới và cũng có thể implement nó trong 1 class.
interface LoaiSP {
id: number;
ten: string;
}
let loai1:LoaiSP = { id: 1, ten:'Đồ Ăn'}; //OK
let loai2:LoaiSP = { id: 2, ten:'Đồ uống'}; //OK
let loai3:LoaiSP = { id:3, ten:5 }; //lỗi
Dùng interface như là 1 kiểu hàm – function type
Sử dụng interface trong TypeScript khá đa dạng. Bạn có thể dùng interface như là 1 kiểu hàm.
interface tinhtoan {
(a: number, b: number): void;
};
function tong2(so1:number, so2:number):void {
let kq:number = Math.pow(so1,2) + Math.pow(so2,2);
console.log('Tổng bình phương = ' + kq)
}
function tong3(so1:number, so2:number):void {
let kq:number = Math.pow(so1,3) + Math.pow(so2,3);
console.log('Tổng mũ 3 = ' + kq)
}
let tt: tinhtoan;
tt = tong2;
tt(4, 3); //Tổng bình phương = 25
tt = tong3;
tt(2,3); //Tổng mũ 3 = 35
tt(2,"3"); //Lỗi
Trong ví dụ trên, tinhtoan là 1 function type – kiểu hàm. Do đó biến tt có thể gán cho nó các hàm khác nhau, lúc là tong2 khi là tong3. Với điều kiện là các hàm tong2, tong3 có 2 tham số number và trả về void khớp với interface là được.
Sử dụng interface tạo array type
Có thể sử dụng interface để tạo kiểu array. Tức dùng interface để khai báo kiểu của các giá trị trong mảng và kiểu cho index của mảng.
interface NumList {
[i:number]:number; //i hay tên gì cũng được
}
let arr: NumList = [1, 2, 3];
arr[3] = 7;
arr[4] = 10;
console.log(arr);//[1, 2, 3, 7, 10]
interface ITinh {
[index:string]:string; //index hay tên gì cũng được
}
let list : ITinh = [];
list["hcm"] = "TP HCM";
list["hn"] = "Hà Nội";
list["hp"] = "Hải Phòng";
console.log(list);// [hcm: 'TP HCM', hn: 'Hà Nội', hp: 'Hải Phòng']
Thuộc tính tùy chọn – Optional Property
Trong interface có thể chỉ định một thuộc tính nào đó là tùy chọn, bằng cách dùng dấu ? Khi đó các đối tượng theo interface có thể định nghĩa thuộc tính đó hoặc không
interface iTinh { id: number; tentinh: string; mota?:string; }
let t1:iTinh = { id:1, tentinh:"Quảng Nam" }
let t2:iTinh = { id:63,tentinh:"Tiền Giang", mota:"Giáp Long An, Bến Tre"}
Thuộc tính read only trong interface
Trong interface có thể đánh dấu 1 thuộc tính nào đó là read only. Nghĩa là chỉ có thể đọc giá trị của thuộc tính mà không thể gán giá trị cho nó.
interface thanhpho { ten: string; readonly madienthoai: number; }
let tp1: thanhpho = { ten: "Sài Gòn", madienthoai: 28 }
tp1.ten = 'TP HCM'; // OK
tp1.madienthoai = 29; // Lỗi
Extending Interface
Mỗi interface có thể extend 1 hoặc nhiều interface khác. Ví dụ
interface INguoi { ten: string; phai: boolean;}
interface IBenhNhan extends INguoi { tenBenh: string; }
let bn1:IBenhNhan = { ten:"Tèo", tenBenh:"Ngứa", phai:true }
interface INguoi { ten: string; phai: boolean;}
interface IBenhNhan { tenBenh: string; }
interface INhanVien extends INguoi, IBenhNhan { maNV: string;}
let nv1:INhanVien = {
ten:"Tèo", phai: true, tenBenh:"Ngứa", maNV:"PS12"
}
console.log(nv1);//{ten:'Tèo',phai: true,tenBenh:'Ngứa',maNV:'PS12'}
Sử dụng interface cho class
Interface trong TypeScript cũng có thể implement cho class. Class nào được implement với interface thì phải khai báo đủ các hàm và thuộc tính trong interface. Ngoài ra có thể định nghĩa thêm các thuộc tính khác tùy ý (tenXe)
interface IDongXe {
dongXe: string; //Honda Vison, Paggio, Yamaha Motor...
tieuthuXang:(km: number) => number;
}
class XeMay implements IDongXe {
tenxe: string;
dongXe: string;
constructor(dx: string, t: string) {
this.dongXe = dx;
this.tenxe = t;
}
tieuthuXang(km:number):number { return 1.87; }
}
let xm1 = new XeMay("Honda Vison", "VS 125 Đen");
console.log(xm1);
Sử dụng interface trong typescript rất linh động phải không. Đây là công cụ mạnh giúp bạn code javascript ngon lành, nhất là trong các dự án nghiệp vụ phức tạp. Bài tiếp theo mời bạn xem Class trong TypeScript nhé
