TypeScript Academy · บทเรียน

ตัวดำเนินการชนิด keyof

รับยูเนียนของคีย์ในชนิดข้อมูลออบเจ็กต์ด้วย keyof

ตัวดำเนินการชนิด keyof เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

key ของชนิดข้อมูล

ตัวดำเนินการ keyof รับชนิดข้อมูลของออบเจ็กต์และสร้างยูเนียนจาก property keys ของออบเจ็กต์นั้น ตัวดำเนินการนี้เป็นพื้นฐานของการเข้าถึงคุณสมบัติและยูทิลิตีสำหรับ key ที่ปลอดภัยด้านชนิดข้อมูล

การใช้ตัวดำเนินการหา key พื้นฐาน

ใช้ keyof กับส่วนติดต่อเพื่อรับยูเนียนของชื่อ key ในรูปชนิดข้อมูลสตริงตามตัวอักษร

interface User {
  id: number
  name: string
}
type UserKeys = keyof User // "id" | "name"
const k: UserKeys = "name"
console.log(k)

อนุญาตเฉพาะ keys ที่ถูกต้อง

ตัวแปรที่กำหนดชนิดข้อมูลเป็น keyof T จะเก็บได้เฉพาะ key จริงรายการใดรายการหนึ่งของ T เท่านั้น ระบบจะตรวจพบการพิมพ์ผิดและ key ที่ไม่ถูกต้องตั้งแต่เวลาคอมไพล์

interface User { id: number; name: string }
const valid: keyof User = "id"
// const bad: keyof User = "email" // Error: not a key of User
console.log(valid)

การใช้ตัวดำเนินการหา key ร่วมกับชนิดข้อมูลจากค่า

ใช้ร่วมกับ typeof เพื่อรับ keys จากชนิดข้อมูลที่อนุมานได้ของค่า ในกรณีนี้ เราจะได้ keys ของออบเจ็กต์ config โดยไม่ต้องเขียนส่วนติดต่อ

const config = { host: "localhost", port: 8080 }
type ConfigKey = keyof typeof config // "host" | "port"
const key: ConfigKey = "port"
console.log(config[key])

ตัวดำเนินการหา key ของลายเซ็นดัชนีแบบข้อความ

สำหรับชนิดข้อมูลที่มีลายเซ็นดัชนีแบบข้อความ keyof จะเป็น string | number เพราะอนุญาตให้ใช้ key ที่เป็นข้อความใดก็ได้ และ key ที่เป็นตัวเลขจะถูกแปลงเป็นข้อความ

type Dict = { [key: string]: number }
type DictKeys = keyof Dict // string | number
const k: DictKeys = "anything"
console.log(k)

ตัวดำเนินการหา key ของลายเซ็นดัชนีแบบตัวเลข

สำหรับลายเซ็นดัชนีแบบตัวเลข keyof จะเป็นเพียง number ซึ่งสอดคล้องกับวิธีที่อาร์เรย์เปิดให้เข้าถึงด้วยดัชนีตัวเลข

type NumDict = { [i: number]: string }
type NumKeys = keyof NumDict // number
const k: NumKeys = 0
console.log(k)

ตัวดำเนินการหา key ของชนิดข้อมูลอาร์เรย์

การใช้ keyof กับชนิดข้อมูลอาร์เรย์จะให้ยูเนียนที่อาจน่าประหลาดใจ ซึ่งประกอบด้วยดัชนีตัวเลข รวมถึงชื่อวิธีการและคุณสมบัติของอาร์เรย์ทั้งหมด เช่น length และ push

type ArrKeys = keyof string[]
// number | "length" | "push" | "map" | ... many more
const k: ArrKeys = "length"
console.log(k)

การวนซ้ำผ่าน keys อย่างปลอดภัย

ใช้ keyof เพื่อเขียนลูปที่เข้าถึงเฉพาะ keys ที่ถูกต้อง การแปลงชนิดของ Object.keys เป็น (keyof T)[] ช่วยให้การเข้าถึงด้วยดัชนีปลอดภัยด้านชนิดข้อมูล

interface User { id: number; name: string }
const u: User = { id: 1, name: "Ada" }
const keys = Object.keys(u) as (keyof User)[]
for (const k of keys) console.log(k, u[k])

ตัวดำเนินการหา key ในข้อจำกัดของชนิดข้อมูลแบบทั่วไป

โดยทั่วไป พารามิเตอร์ key แบบทั่วไปจะถูกจำกัดด้วย K extends keyof T ซึ่งรับรองว่า key นั้นมีอยู่จริงในออบเจ็กต์

function pluck<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const name = pluck({ id: 1, name: "Ada" }, "name")
console.log(name) // Ada

การรวมหลาย keys

เนื่องจาก keyof T เป็นยูเนียน คุณจึงสามารถหาส่วนร่วมของ keys หรือกรอง keys ได้ ในกรณีนี้ฟังก์ชันจะรับอาร์เรย์ของ keys ที่ถูกต้อง

function pick<T, K extends keyof T>(obj: T, keys: K[]): Pick<T, K> {
  const out = {} as Pick<T, K>
  for (const k of keys) out[k] = obj[k]
  return out
}
console.log(pick({ a: 1, b: 2, c: 3 }, ["a", "c"]))

เหตุผลที่การตรวจสอบ keys มีความสำคัญ

keyof เปลี่ยนชื่อคุณสมบัติให้เป็นชนิดข้อมูลที่ตรวจสอบได้ ทำให้สร้างตัวอ่านค่า ตัวกำหนดค่า และตัวแปลงทั่วไปที่ไม่สามารถอ้างอิง key ที่ไม่มีอยู่จริงได้ แนวคิดนี้พบได้ทั่วไปใน TypeScript ขั้นสูง

interface Settings { theme: string; size: number }
function has<T>(obj: T, key: keyof T): boolean {
  return key in (obj as object)
}
console.log(has<Settings>({ theme: "x", size: 1 }, "theme"))

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับตัวดำเนินการหา key

ทบทวน

keyof T จะสร้างยูเนียนของ property keys ของ T ในรูปชนิดข้อมูลตามตัวอักษร และจำกัดตัวแปรให้ใช้ได้เฉพาะ keys ที่ถูกต้อง สำหรับลายเซ็นดัชนีแบบข้อความ จะให้ผลเป็น string | number ส่วนลายเซ็นดัชนีแบบตัวเลขจะให้ผลเป็น number เมื่อใช้คู่กับ typeof จะสามารถอนุมาน keys จากค่าได้ และเมื่อใช้คู่กับชนิดข้อมูลแบบทั่วไป (K extends keyof T) จะช่วยสร้างตัวอ่านค่า ตัวเลือกข้อมูล และการวนซ้ำที่ปลอดภัยด้านชนิดข้อมูล

คำถามที่พบบ่อย

บทเรียน “ตัวดำเนินการชนิด keyof” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ตัวดำเนินการชนิด keyof” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ตัวดำเนินการชนิด keyof”

รับยูเนียนของคีย์ในชนิดข้อมูลออบเจ็กต์ด้วย keyof คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน

บทเรียน “ตัวดำเนินการชนิด keyof” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม

ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

← กลับไปที่ TypeScript Academy