Trong TypeScript, interface được sử dụng rất rộng rãi, từ định nghĩa cho Class, đến cho Function, hay được sử dụng như một kiểu (type) . Có thể hiểu nó như là một tiêu chuẩn, một cấu trúc bắt buộc mà nếu bất kỳ đối tượng nào sử dụng, trích xuất nó ra đều bắt buộc phải tuân theo. Trong bài viết này chúng ta sẽ cùng nhau tìm hiểu kỹ hơn về interface trong TypeScript, cách ứng dụng nó trong cụ thể nhé.

Bài viết này nằm trong series tự học TypeScript 15 phút mỗi ngày cùng yeulaptrinh.vn . Mời các bạn có thể đọc thêm và theo dõi những bài viết khác của chúng mình tại đây nhé.

Interface trong TypeScript

Trong quá trình compile, interface sẽ không được TSC chuyển đổi sang JS. Tuy nhiên, TS sử dụng interface như một type checking, dùng để bắt lỗi tương tự như khi check các kiểu type khác.

Cấu trúc một interface cơ bản có thể được định nghĩa từ các thuộc tính hay các function. Chúng ta có thể xem ví dụ dưới đây

interface Student {
    name: string;
    age: number;
    getMark: () => number;
    getTeacher(name: string): string;

}

Lưu ý đối với các function sử dụng trực tiếp trong interface thì phải sử dụng dưới dạng arrow function. Các class hay dẫn xuất nào sử dụng interface trên để định nghĩa thì bắt buộc phải có đầy đủ các thuộc tính bên trong nó. Nếu không sẽ bị báo lỗi ngay và không thể compile được

let UncleBob: Student = { name: 'UncleBob', age: 24}

//error TS2739: Type '{ name: string; age: number; }' is missing the following properties from type 'Student': getMark, getTeacher

Sử dụng Interface như một Type

Ở ví dụ trên, chúng ta có thể thấy chúng ta sử dụng Interface Student như một Type. Và khi chúng ta định nghĩa biến UncleBob, không tuân thủ theo cấu trúc của Interface, ngay lập tức tsc sẽ báo lỗi. TypeScript sẽ sử dụng interface để đảm bảo các biến sử dụng chúng đều đảm bảo theo cấu trúc chung.

Sử đụng Interface như một Function Type

Chúng ta xem ví dụ cụ thể dưới đây nhé

interface StudentInformationGenerator {
	(subject: string, mark: number): string;
}

function getStudentMark (subject: string, mark: number): string {
	return `${subject} : ${mark}`
}

let generatingMark: StudentInformationGenerator = getStudentMark 

generatingMark('Math', 10) // Math : 10



function getSubjectName (subject: string): string {
		return `${subject}`
	}

let generatingSubject: StudentInformationGenerator = getSubjectName


generatingSubject('Math', 10) // Math

Ở ví dụ trên chúng ta đã định nghĩa một Function type là StudentMarkGenerator, và nó có thể sử dụng cho việc khai báo type và gán với một function có cấu trúc cùng kiểu trả về với nó. Ở ví dụ trên, chúng ta đã khai báo generatingMark , generatingSubject và sử dụng chúng như các function.

Dưới đây là một ví dụ về lỗi nếu như chúng ta gán sai Function Type

function checkIn (subject: string): void {
	console.log(`${subject}`)
}

let checkInClass: StudentInformationGenerator = checkIn


// Type '(subject: string) => void' is not assignable to type 'StudentInformationGenerator'.
  Type 'void' is not assignable to type 'string'.

Summary

Ở bài này chúng ta đã được tìm hiểu về những thứ cơ bản nhất của Interface trong TypeScript, ở phần tiếp theo chúng ta sẽ đi sâu hơn về những phần nâng cao hơn về nó, các bạn hãy cũng đón xem trên yeulaptrinh.vn của tụi mình nhé.

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.