Lấy giá trị từ object một cách an toàn 😁

1. extends keyof trong Generics – Giải thích và Ví dụ

1. keyof trong TypeScript là gì?

keyof trong TypeScript được dùng để lấy danh sách các key của một object dưới dạng union type.

type Person = { name: string; age: number };
type PersonKeys = keyof Person; // "name" | "age"
let key: PersonKeys;
key = "name"; // ✅ Hợp lệ
key = "age";  // ✅ Hợp lệ
// key = "email"; // ❌ Lỗi vì "email" không có trong Person

• keyof Person lấy ra "name" | "age", tức là tất cả các key của Person.

2. Kết hợp extends với keyof trong Generics

Khi dùng Generics, bạn có thể giới hạn một kiểu dữ liệu chỉ được phép là key của một object bằng cách dùng T extends keyof U.

Ví dụ 1: Lấy giá trị từ object một cách an toàn

Giả sử bạn muốn viết một hàm lấy giá trị từ object nhưng đảm bảo key hợp lệ:

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
    return obj[key];
}
const person = { name: "Alice", age: 30 };
console.log(getProperty(person, "name")); // Output: Alice
console.log(getProperty(person, "age"));  // Output: 30
// console.log(getProperty(person, "email")); // ❌ Lỗi vì "email" không có trong person

🔹 Giải thích:

• T là kiểu của object (person).

• K extends keyof T đảm bảo K chỉ có thể là một key hợp lệ của T.

• T[K] là kiểu của giá trị tương ứng với key đó.

3. extends keyof trong Interface và Class

Bạn có thể dùng extends keyof với interface hoặc class.

Ví dụ 2: Interface với Generics

interface DataStorage<T> {
    data: T;
    get<K extends keyof T>(key: K): T[K];
}
const storage: DataStorage<{ id: number; name: string }> = {
    data: { id: 1, name: "Alice" },
    get(key) {
        return this.data[key];
    }
};
console.log(storage.get("id"));   // Output: 1
console.log(storage.get("name")); // Output: Alice
// console.log(storage.get("email")); // ❌ Lỗi vì "email" không có trong data

🔹 Giải thích:

• T là kiểu dữ liệu của object.

• K extends keyof T đảm bảo chỉ truy cập vào các key hợp lệ.

• T[K] là kiểu dữ liệu của key đó.

4. Cập nhật giá trị trong object với extends keyof

Bạn có thể sử dụng extends keyof để tạo một hàm cập nhật giá trị của object một cách an toàn.

Ví dụ 3: Hàm cập nhật thuộc tính

function updateProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
    obj[key] = value;
}
const user = { username: "Alice", age: 25 };
updateProperty(user, "username", "Bob"); // ✅ Hợp lệ
updateProperty(user, "age", 30);         // ✅ Hợp lệ
// updateProperty(user, "email", "[e-mail]"); // ❌ Lỗi vì "email" không tồn tại
console.log(user); // Output: { username: "Bob", age: 30 }

🔹 Giải thích:

• T là kiểu của object.

• K extends keyof T đảm bảo K là một key hợp lệ.

• value: T[K] đảm bảo giá trị được truyền vào đúng kiểu dữ liệu.

Tóm tắt

Cú pháp	Ý nghĩa
keyof T	Lấy danh sách key của object T
K extends keyof T	K phải là một key hợp lệ của T
T[K]	Kiểu dữ liệu của thuộc tính K trong object T

Lợi ích của extends keyof

✅ Giúp tránh lỗi truy cập key không hợp lệ ✅ Hỗ trợ code an toàn hơn với type checking ✅ Giúp viết hàm tái sử dụng tốt hơn với Generics

Bạn đã hiểu rõ hơn chưa? Nếu cần thêm ví dụ thực tế hơn, mình có thể giúp nhé! 🚀