TypeScript Academy · บทเรียน

การรวม typeof และ keyof

อนุมานชนิดข้อมูลที่แม่นยำด้วยการเชื่อมตัวดำเนินการชนิดข้อมูล

บทเรียน 4 จาก 413 ขั้นตอน

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

การผสานพลัง

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

การใช้งาน keyof typeof

เริ่มจากอ็อบเจ็กต์ค่าคงที่ จับประเภทของอ็อบเจ็กต์ด้วย typeof แล้วแสดงรายการคีย์ด้วย keyof ผลลัพธ์คือยูเนียนของชื่อคีย์แบบลิเทอรัลของอ็อบเจ็กต์

const colors = { red: "#f00", green: "#0f0" }
type ColorKey = keyof typeof colors // "red" | "green"
const k: ColorKey = "red"
console.log(colors[k])

เหตุผลที่มีรูปแบบนี้

บ่อยครั้งคุณมีอ็อบเจ็กต์ขณะทำงาน แต่ไม่มีอินเทอร์เฟซแยกต่างหาก keyof typeof ช่วยให้ได้ประเภทคีย์โดยไม่ต้องเขียนรูปร่างของอ็อบเจ็กต์ซ้ำเป็นประเภทด้วยตนเอง

const status = { active: 1, inactive: 0, pending: 2 }
type Status = keyof typeof status // "active" | "inactive" | "pending"
const s: Status = "pending"
console.log(status[s]) // 2

การเข้าถึงตามคีย์อย่างปลอดภัยด้านประเภท

พารามิเตอร์ของฟังก์ชันที่กำหนดประเภทเป็น keyof typeof obj จะปฏิเสธคีย์ที่ไม่ถูกต้องตั้งแต่เวลาคอมไพล์ ดังนั้นการเข้าถึงด้วยดัชนีภายในฟังก์ชันจึงปลอดภัยอย่างแน่นอน

const rates = { usd: 1, eur: 1.1, gbp: 1.3 }
function rate(currency: keyof typeof rates): number {
  return rates[currency]
}
console.log(rate("eur")) // 1.1
// rate("jpy") // Error: not a key

อ็อบเจ็กต์ค่าคงที่แบบแจงนับจำลอง

รูปแบบที่ใช้กันทั่วไปคือกำหนดอ็อบเจ็กต์ as const ให้ทำหน้าที่คล้ายการแจงนับจำลอง แล้วอนุมานทั้งประเภทคีย์และประเภทค่าจากอ็อบเจ็กต์นั้น

const Direction = { Up: "UP", Down: "DOWN" } as const
type DirKey = keyof typeof Direction // "Up" | "Down"
type DirValue = typeof Direction[keyof typeof Direction] // "UP" | "DOWN"
console.log(Direction.Up)

คีย์เทียบกับค่า

โปรดสังเกตความแตกต่าง: keyof typeof obj ให้ชื่อคีย์ ส่วน typeof obj[keyof typeof obj] ให้ประเภทค่า เลือกใช้ตามสิ่งที่ส่วนติดต่อโปรแกรมของคุณต้องการ

const sizes = { sm: 8, md: 16, lg: 24 } as const
type SizeName = keyof typeof sizes // "sm" | "md" | "lg"
type SizeValue = typeof sizes[keyof typeof sizes] // 8 | 16 | 24
const v: SizeValue = 16
console.log(v)

getProperty แบบเจเนอริก

ตัวอ่านค่าแบบปลอดภัยด้านประเภทที่ใช้กันเป็นต้นแบบจะจำกัดพารามิเตอร์คีย์ด้วย K extends keyof T และส่งคืน T[K] ดังนั้นประเภทผลลัพธ์จึงตรงกับประเภทของคุณสมบัติที่ค้นหาอย่างแม่นยำ

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

ประเภทผลลัพธ์เปลี่ยนตามคีย์

เนื่องจากค่าที่ส่งคืนคือ T[K] ประเภทผลลัพธ์ของการเรียกใช้แต่ละครั้งจึงปรับตามคีย์เฉพาะที่ส่งเข้าไป ซึ่งอาจเป็นตัวเลขสำหรับคีย์หนึ่ง และเป็นสตริงสำหรับอีกคีย์หนึ่ง

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

คีย์ที่ไม่ถูกต้องจะถูกปฏิเสธ

การส่งคีย์ที่ไม่มีอยู่ในอ็อบเจ็กต์จะทำให้เกิดข้อผิดพลาดขณะคอมไพล์ ข้อจำกัดของเจเนอริกจะบังคับใช้กฎนี้ก่อนที่โค้ดจะเริ่มทำงาน

function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const u = { id: 1 }
// getProperty(u, "missing") // Error: not a key of u
console.log(getProperty(u, "id"))

ตัวกำหนดค่าอย่างปลอดภัยด้านประเภท

กลไกเดียวกันนี้ใช้สร้างตัวกำหนดค่าได้ โดยพารามิเตอร์ค่าจะเป็น T[K] ดังนั้นคุณจึงกำหนดได้เฉพาะค่าที่มีประเภทถูกต้องสำหรับคีย์นั้น

function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value
}
const u = { id: 1, name: "Ada" }
setProperty(u, "name", "Leo")
console.log(u.name)

นำทุกอย่างมารวมกัน

รูปแบบ keyof typeof เมื่อใช้ร่วมกับการเข้าถึงแบบเจเนอริก T[K] จะมอบเครื่องมือที่ปลอดภัยและนำกลับมาใช้ซ้ำได้สำหรับอ็อบเจ็กต์จริง ซึ่งเป็นพื้นฐานของตัวอ่านการตั้งค่าที่มีประเภท การค้นหา และตัวช่วยจัดการแบบฟอร์ม

const theme = { primary: "#007", danger: "#f00" } as const
function color(name: keyof typeof theme): string {
  return theme[name]
}
console.log(color("danger")) // #f00

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

ทดสอบความเข้าใจเกี่ยวกับการใช้ typeof และ keyof ร่วมกัน

ตอบคำถามในบทเรียนแบบโต้ตอบ

ทบทวน

keyof typeof value อนุมานยูเนียนของคีย์จริงของค่าโดยไม่ต้องเขียนอินเทอร์เฟซแยกต่างหาก ทำให้การเข้าถึงด้วยดัชนีปลอดภัยด้านประเภท โปรดแยกประเภทคีย์ (keyof typeof obj) ออกจากประเภทค่า (typeof obj[keyof typeof obj]) รูปแบบเจเนอริก getProperty<T, K extends keyof T>(obj, key): T[K] จะส่งคืนประเภทที่ค้นหาได้อย่างแม่นยำและปฏิเสธคีย์ที่ไม่ถูกต้องตั้งแต่เวลาคอมไพล์

เริ่มต้นได้ฟรี

เรียนรู้ TypeScript ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส: 101
บทเรียน: 352

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “การรวม typeof และ keyof” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การรวม typeof และ keyof”

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

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

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

บทเรียน “การรวม typeof และ keyof” ใช้เวลานานแค่ไหน

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

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

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

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

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