Keyof

ในบทความนี้ ผมจะอธิบายละเอียดขั้นตอนในการสร้างฟังก์ชันที่สามารถดึงค่าจากคีย์ของ Object ใน TypeScript

สมมติ เริ่มต้นด้วยการกำหนดโครงสร้างของ Object ใน Post ดังนี้:

type Post = {
  title: string;
  date: Date;
};

const myPost: Post = {
  title: "TypeScript is great!",
  date: new Date(),
};

สมมติว่า เราต้องการสร้าง Function ที่ดึง Value ออกมาจาก Key ของ Object myPost นี้
ts
```
getPostByKey1("title", myPost); // TypeScript is great!
```
ถ้าเราพยายามใช้ key ในรูปแบบ string สำหรับฟังก์ชัน getPostByKey2 เราจะเจอข้อผิดพลาด เนื่องจากคีย์ต้องเป็น title หรือ date
ts
```
function getPostByKey2(key: string, postData: Post) {
  return postData[key];
   // Error: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'Post'.
}
```
วิธีแก้ไขคือการกำหนดคีย์ให้เป็น union type แสดงว่า key ต้องเป็น union type ที่มีค่าเป็น 'title' | 'date'
ts
```
function getPostByKey3(key: 'title' | 'date', postData: Post) {
  return postData[key];
}
```
ใช้คำสั่ง keyof เพื่อได้ union ของคีย์ของ Object ทำให้เราสามารถกำหนดคีย์ที่ถูกต้องและใช้งานได้
ts
```
type KeyOfPost = keyof Post; // 'title' | 'date'
```
เราสามารถสร้างฟังก์ชันที่เป็น generic และนำไปใช้กับข้อมูลใด ๆ ได้ ด้วยฟังก์ชัน getObjectByKey ซึ่งใช้ keyof ของตัวแปร T ตัวอย่างนี้ใช้ 'date' จาก object myPost
ts
```
function getObjectByKey<T>(key: keyof T, data: T) {
  return data[key];
}
getObjectByKey('date', myPost);
```

จากตัวอย่าง เราสามารถสร้างฟังก์ชันที่สามารถดึงค่าจากคีย์ของ Object อย่างมีประสิทธิภาพและยืดหยุ่นใน TypeScript ได้ ฟังก์ชัน getObjectByKey ที่เป็น generic สามารถนำไปใช้กับ Object หรือโครงสร้างข้อมูลชนิดอื่น ๆ ได้ตามความต้องการของคุณ

ลองเล่นใน Playground

Keyof ​

Keyof