Đã 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. 😁

Mục lục

• Vấn đề
• Cách thứ 1: thêm Property optional
• Cách thứ 2: sử dụng Record<Keys, Type> trong Uitlity Type
• Cách thứ 3: sử dụng index signature

Vấ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.

Cách thứ 1: thêm Property optional

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.

Cách thứ 2: sử dụng Record<Keys, Type> trong Uitlity Type

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

Cách thứ 3: sử dụng index signature

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 🍺