Hàm Generic với Keyof trong Typescript
Trong bài tập này, mình sẽ tạo một hàm generic sử dụng keyof trong TypeScript để trích xuất giá trị của một key từ một đối tượng. Hàm sẽ đảm bảo key truyền vào tồn tại trong đối tượng.
Xây dựng Hàm Generic
Hãy viết một hàm generic getValueByKey nhận vào một đối tượng và một key, trả về giá trị của key đó từ đối tượng. Sử dụng keyof để đảm bảo key truyền vào tồn tại trong đối tượng.
function getValueByKey<T, K extends keyof T>(obj: T, key: K): T[K] {
return obj[key];
}
Sử dụng hàm với một đối tượng và một Key
Hãy tạo một đối tượng và sử dụng hàm getValueByKey để trích xuất giá trị của key từ đối tượng đó.
const user = {
id: 123,
username: "john_doe",
email: "[email protected]",
};
const userId = getValueByKey(user, "id");
console.log(userId); // Kết quả: 123
const userEmail = getValueByKey(user, "email");
console.log(userEmail); // Kết quả: "[email protected]"
Hàm getValueByKey sử dụng keyof T để xác định rằng key truyền vào hàm phải tồn tại trong đối tượng T. Khi sử dụng hàm này, TypeScript sẽ kiểm tra và đảm bảo key truyền vào là một key hợp lệ của đối tượng.
Kết quả khi chạy mã lệnh sẽ trả về giá trị tương ứng của key từ đối tượng đã cho.
Hàm generic với keyof trong TypeScript là một cách mạnh mẽ để trích xuất giá trị từ một đối tượng dựa trên key chỉ định. Việc sử dụng keyof giúp kiểm tra và đảm bảo tính hợp lệ của key, tăng tính an toàn và chính xác khi làm việc với dữ liệu trong TypeScript.
Bài giải
-------------------- ######## --------------------
Câu hỏi thường gặp liên quan:
- Viết một lớp Stack và Queue sử dụng Generic Type.
- Tạo một hàm generic nhận vào một mảng và trả về phần tử cuối cùng của mảng trong TypeScript.
- Viết một lớp Dictionary/Map sử dụng Generic Type để lưu trữ cặp key-value trong TypeScript.
- Tạo một hàm generic nhận vào một mảng và một hàm predicate trong TypeScript.
- Hàm Generic với Keyof trong Typescript
- Tạo một hàm generic nhận vào hai đối tượng và trả về một đối tượng mới trong TypeScript.

Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..)
Chia lấy phần dư / chia lấy phần nguyên trong javascript
Các cách khai báo biến trong Javascript
Các sự kiện (Event) trong Javascript
Hướng tạo thanh search bar bằng CSS
Hàm array.slice() trong Javascript
Tính tổng hai số bằng Javascript (cộng hai số)
Cách khai báo biến trong PHP, các loại biến thường gặp
Download và cài đặt Vertrigo Server
Thẻ li trong HTML
Thẻ article trong HTML5
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên
Cách dùng thẻ img trong HTML và các thuộc tính của img
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng