Đã bao giờ bạn thắc mắc làm sao để thêm Properties vào một Object được định nghĩa trước mà không gặp lỗi Property ‘x’ does not exist on type ‘y’ chưa? Bài viết này sẽ giải đáp thắc mắc cho bạn. 😁
interface Student {
name: string;
age?: number;
}
const sang: Student = {
name: "Sang"
}
sang.age = 20; // 👈 Error: Property ‘age’ does not exist on type 'Student’
Sẽ có 1 số bạn sẽ nghĩ là chỉ cần thêm trực tiếp age vào Student là xong. Điều đó sẽ có vấn đề rất lớn:
Nếu bạn chỉ duy nhất biến sang có age sẽ không được. Vì khi thêm age vào Student các biến kiểu Student khác đều phải thêm age.
Vậy cho ‘age’ thành ‘age?’ Optional thì sao ?
interface Student {
name: string;
age?: number;
}
Như vậy cũng là 1 cách. Nhưng nhược điểm của việc này là bạn phải đi tới interface vào thêm nó vào.
interface Student extends Record<string, any> {
name: string
}
const sang: Student = {
name: "Sang"
}
sang.age = 20 // ✅
Record dùng ra pair Key và Value mới. Link
interface Student {
name: string;
[key: string]: any;
}
const sang: Student = {
name: "Sang"
}
sang.age = 20 // ✅
Cách này cũng tương tự như dùng Record<>. Sẽ có nhược điểm lớn nhất ở cách thứ 2 và 3 đó chính là Properties mới khi thêm kiểu dữ liệu sẽ là any.
Để thuận cho việc type safety thì bạn nên hạn chế any hết mức có thể. Giả sự Student các value chỉ gồm kiểu dữ liệu là string hoặc number thì ta có thể làm như vậy.
interface Student extends Record<string, string | number> {
name: string;
}
interface Student {
name: string;
[key: string]: string | number;
}
const sang: Student = {
name: "Sang",
};
sang.age = 20;
Thực tế có nhiều cách khác cho việc này ví dụ như sử dụng chẳng hạn như Object.assign()…, bạn có thể tham khảo thêm.
Hi vọng qua bài viết này mọi người biết được cách thêm Properties vào Object trong Typescript. Mong các bạn đón chờ những bài viết tiếp theo về TS cơ bản.
Cheers 🍺
