Bài 10: TypeScript – Interfaces (Phần 2)
Nối tiếp bài trước, chúng ta sẽ cùng nghiên cứu thêm các features khác của Interface trong TypeScript 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é.
Chúng ta cùng bắt đầu thôi.
Optional Properties
Trong thực tế, nhiều khi chúng ta sử dụng các interface với la liệt các thuộc tính ( properties) không thực sự bắt buộc phải có (optional). TS cung cấp một tính năng, đó là sử dụng dấu ‘?’ ngay sau tên của các thuộc tính để đánh dauas chúng. Các object trích xuất từ các interface này không bắt buộc phải khai báo chúng. Chúng ta xem ví dụ cụ thể dưới đây nhé.
interface Student {
name: string;
age: number;
class?: string;
}
let UncleBob: Student = { name: 'UncleBob', age: 24}
UncleBob.class // undefined
let Melmold: Student = { name: 'Melmold', age: 25, class: '10A'}
Melmold.class // 10A
Ta có thể thấy, object UncleBob không nhất thiết phải có thuộc tính class, mặc dù đang được định nghĩa từ interface Student. Khi làm dự án, các bạn sẽ gặp những trường hợp này rất nhiều, ứng dụng chúng sẽ giúp code của mình sạch hơn, đẹp hơn, tái sử dụng dễ dàng hơn
readonly Properties
TS sử dụng readonly để đánh dấu một thuộc tính trong sau khi khởi tạo đối tượng (object) từ interface. Thuộc tính đó sẽ không thể bị ghi đè (overwriter), luôn luôn cố định sau khi đã gán giá trị cho nó từ lúc khởi tạo, nó sẽ báo lỗi khi chúng ta cố thử đổi giá trị của chúng
interface Student {
name: string;
readonly age: number;
class?: string;
}
let UncleBob: Student = { name: 'UncleBob', age: 24}
UncleBob.name = 'Bobby' // Overwrite successfully
UncleBob.name // Bobby
UncleBob.age = 25 //error: Cannot assign to 'age' because it is a read-only property.
Một cách sử dụng khác cùng, đó là sử dụng Readonly<T> để tạo một readonly type, lúc này tất cả các thuộc tính (properties) bên trong chúng đều không thể bị overwrite
interface Student {
name: string;
age: number;
class?: string;
}
let UncleBob: Readonly<Student> = { name: 'UncleBob', age: 24}
UncleBob.name = 'Bobby' //error: Cannot assign to 'name' because it is a read-only property.
UncleBob.age = 25 //error: Cannot assign to 'age' because it is a read-only property.
Extending Interfaces
Các interfaces có thể mở rộng (extends) một hoặc nhiều intefaces khác, khi này các interfaces này sẽ có tất cả các thuộc tính cũng như phương thức (methods) từ interfaces gốc.
interface Person {
name: string;
age: number;
}
interface Student extends Person{
class?: string;
}
let UncleBob: Student = { name: 'UncleBob', age: 24, class: '10A' }
UncleBob.name // UncleBob
UncleBob.age // 24
UncleBob.class // 10A
Việc nắm bắt, thành thạo khi sử dụng extends sẽ giúp ích rất nhiều trong việc tổ chức code một cách khoa học, thông minh, tái sử dụng code một cách dễ dàng.
Summary
Vậy là chúng ta đã đi hết một lượt các khái niệm, tìm hiểu về interfaces trong Typescript, hi vọng bài viết sẽ giúp ích, cung cấp thêm kiến thức cho các bạn.
Rất mong nhận được sự đóng góp của các bạn để mình có thể hoàn thiện bài viết hơn. Cùng đón xem nhiều bài viết trong series này trên yeulaptrinh.vn nhé.