ถ้าเราใช้ JavaScript โดยตรงเราสามารถ access property ใน object ได้โดยใช้ dot .
หรือใช้ indexing operator [property_name]
แบบนี้ แต่พอเป็น TypeScript ตอนเราใช้ indexing operator จะฟ้องว่าเราใส่ผิด type เราต้อง convert string ที่เราใส่ตรง []
เป็น type ของ key ของ object ก่อนด้วย keyof
ตัวอย่างโค้ดง่ายๆเช่น
type Point = { x: number; y: number };
type P = keyof Point;
const p: Point = { x: 10, y: 20 };
const y: string = "y";
console.log(p[y]);
เราจะโดน compiler แจ้ง type error ว่า
Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Point'.
No index signature with a parameter of type 'string' was found on type 'Point'.
วิธีแก้คือเราต้องกำหนด type ของ y
ให้เป็น keyof Point
แทนแบบนี้