TypeScript Academy · บทเรียน

keyof และชนิดการเข้าถึงแบบดัชนี

เข้าถึงชนิดพร็อพเพอร์ตีของออบเจ็กต์แบบไดนามิกด้วย keyof และ T[K]

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

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

ยินดีต้อนรับ

keyof สร้างยูเนียนของชื่อคุณสมบัติในประเภทออบเจ็กต์ ประเภทการเข้าถึงด้วยดัชนี (`T[K]`) ใช้ดึงประเภทที่คีย์คุณสมบัติเฉพาะ

พื้นฐาน keyof

`keyof T` ส่งคืนยูเนียนของประเภทชื่อคุณสมบัติทั้งหมดของ T
interface User { id: number; name: string; email: string; }
type UserKeys = keyof User; // 'id' | 'name' | 'email'

การเข้าถึงด้วยดัชนี: T[K]

ใช้ `T[K]` เพื่อรับประเภทของคุณสมบัติ K ในประเภท T
type IdType = User['id'];   // number
type NameType = User['name']; // string

การเข้าถึงคุณสมบัติแบบไดนามิก

ใช้ keyof ร่วมกับเจเนอริกเพื่อสร้างฟังก์ชันเข้าถึงคุณสมบัติที่ปลอดภัยด้านประเภท
function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}
const name = getProperty(user, 'name'); // string

keyof ร่วมกับ typeof

ใช้ typeof กับค่า แล้วใช้ keyof เพื่อรับชื่อคุณสมบัติของค่านั้นโดยไม่ต้องประกาศอินเทอร์เฟซ
const config = { host: 'localhost', port: 3000 };
type ConfigKey = keyof typeof config; // 'host' | 'port'

ยูเนียนของประเภทที่เข้าถึงด้วยดัชนี

ใช้ประเภทด้วยยูเนียนของคีย์เพื่อรับยูเนียนของประเภทค่าที่คีย์เหล่านั้นอ้างถึง
type NumericValues = User['id' | 'age']; // number | number = number

keyof กับอาร์เรย์

การใช้ keyof กับประเภทอาร์เรย์จะส่งคืนทั้งประเภทดัชนีของอาร์เรย์และชื่อเมธอดของอาร์เรย์
type ArrKey = keyof string[]; // number | 'length' | 'push' | ...
type Element = string[][number]; // string

การเข้าถึงด้วยดัชนีแบบเรียกซ้ำ

เชื่อมประเภทการเข้าถึงด้วยดัชนีเพื่อเข้าถึงออบเจ็กต์ที่ซ้อนกัน
type Address = { city: string; zip: string };
type Profile = { address: Address };
type City = Profile['address']['city']; // string

ข้อจำกัดด้วย keyof

ใช้ `K extends keyof T` เป็นข้อจำกัดของเจเนอริกเพื่อรับรองว่า K เป็นคีย์ที่ถูกต้องของ T
function setProperty<T, K extends keyof T>(obj: T, key: K, value: T[K]): void {
  obj[key] = value;
}

ประเภทแมปใช้ keyof

ประเภทแมปวนซ้ำผ่าน `keyof T` เพื่อแปลงประเภทออบเจ็กต์
type Readonly2<T> = { readonly [K in keyof T]: T[K] };

keyof ในประเภทแบบมีเงื่อนไข

keyof มีประสิทธิภาพในประเภทแบบมีเงื่อนไขสำหรับแยกกลุ่มคีย์ที่ต้องการ
type StringKeys<T> = { [K in keyof T]: T[K] extends string ? K : never }[keyof T];

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

`User['name']` ส่งคืนอะไร หาก `interface User { name: string }`

สรุป

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

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

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

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

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

บทเรียน “keyof และชนิดการเข้าถึงแบบดัชนี” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “keyof และชนิดการเข้าถึงแบบดัชนี”

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

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

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

บทเรียน “keyof และชนิดการเข้าถึงแบบดัชนี” ใช้เวลานานแค่ไหน

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

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

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

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

  1. keyof และชนิดการเข้าถึงแบบดัชนี
  2. ข้อจำกัดเจเนอริก: การจำกัดพารามิเตอร์ชนิดให้แคบลง
  3. ชนิดแบบมีเงื่อนไข: T extends U ? X : Y
  4. ชนิดแบบมีเงื่อนไขชนิดกระจาย
← กลับไปที่ TypeScript Academy