TypeScript Academy · บทเรียน

ชนิดข้อมูลการเข้าถึงแบบดัชนี

ค้นหาชนิดข้อมูลของคุณสมบัติด้วยไวยากรณ์ T[K]

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

การค้นหาชนิดข้อมูลของคุณสมบัติ

ชนิดข้อมูลการเข้าถึงด้วยดัชนีช่วยให้ค้นหาชนิดข้อมูลของคุณสมบัติโดยใช้ไวยากรณ์วงเล็บในตำแหน่งชนิดข้อมูล เช่น Obj['prop'] แนวคิดนี้คล้ายกับการอ่านค่า แต่ทำงานในระดับชนิดข้อมูล

การเข้าถึงด้วยดัชนีพื้นฐาน

ใช้ key ตามตัวอักษรเป็นดัชนีของชนิดข้อมูลเพื่อดึงชนิดข้อมูลของคุณสมบัตินั้นออกมา User['name'] จะให้ผลเป็น string

interface User { id: number; name: string }
type NameType = User["name"] // string
const n: NameType = "Ada"
console.log(n)

เหตุใดจึงไม่เขียนชนิดข้อมูลโดยตรง

การเข้าถึงด้วยดัชนีช่วยให้ชนิดข้อมูลสอดคล้องกัน หาก User.name เปลี่ยนจาก string เป็นชนิดอื่น การใช้ User['name'] ทุกแห่งจะอัปเดตโดยอัตโนมัติ จึงไม่ต้องแก้ไขด้วยตนเอง

interface Product { price: { amount: number; currency: string } }
type Price = Product["price"] // { amount: number; currency: string }
const p: Price = { amount: 10, currency: "USD" }
console.log(p)

การเข้าถึงด้วยยูเนียนของ keys

ใช้ยูเนียนของ keys เป็นดัชนีเพื่อรับยูเนียนของชนิดข้อมูลค่าที่สอดคล้องกัน User['id' | 'name'] จะให้ผลเป็น number | string

interface User { id: number; name: string }
type IdOrName = User["id" | "name"] // number | string
const v: IdOrName = 5
console.log(v)

Obj[keyof Obj] สำหรับค่าทั้งหมด

ใช้ keyof Obj เป็นดัชนีเพื่อรับยูเนียนของชนิดข้อมูลค่าทั้งหมด ในออบเจ็กต์ ซึ่งก็คือชุดชนิดข้อมูลค่าที่ครบถ้วนของออบเจ็กต์นั้น

interface Config { host: string; port: number; secure: boolean }
type Values = Config[keyof Config] // string | number | boolean
const v: Values = true
console.log(v)

ชนิดข้อมูลสมาชิกอาร์เรย์ด้วยดัชนีตัวเลข

สำหรับชนิดข้อมูลอาร์เรย์ ให้ใช้ number เป็นดัชนีเพื่อรับชนิดข้อมูลของสมาชิก string[][number] คือ string

type Names = string[]
type Item = Names[number] // string
const x: Item = "Ada"
console.log(x)

ชนิดข้อมูลสมาชิกของทูเพิล

การใช้ number เป็นดัชนีของทูเพิลจะให้ยูเนียนของชนิดข้อมูลสมาชิกทั้งหมด ซึ่งมีประโยชน์สำหรับอนุมานชนิดข้อมูลของค่าจากรายการที่มีความยาวคงที่

type Pair = [string, number]
type Element = Pair[number] // string | number
const e: Element = 42
console.log(e)

การใช้งานร่วมกับ typeof

จัดทำดัชนีประเภทของค่าด้วย typeof เมื่อใช้ร่วมกับ [number] บนอาร์เรย์ as const วิธีนี้จะอนุมานยูเนียนของค่าลิเทอรัลในอาร์เรย์

const colors = ["red", "green", "blue"] as const
type Color = typeof colors[number] // "red" | "green" | "blue"
const c: Color = "green"
console.log(c)

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

เชื่อมการค้นหาเพื่อเจาะเข้าไปในประเภทที่ซ้อนกัน วงเล็บเหลี่ยมแต่ละคู่จะลงไปในโครงสร้างหนึ่งระดับ

interface Data { user: { profile: { age: number } } }
type Age = Data["user"]["profile"]["age"] // number
const a: Age = 36
console.log(a)

การเข้าถึงด้วยดัชนีในเจเนอริก

รูปแบบ T[K] ร่วมกับ K extends keyof T คือกลไกเบื้องหลังตัวอ่านค่าที่ปลอดภัยด้านประเภท โดยประเภทค่าที่ส่งคืนจะตรงกับประเภทของคุณสมบัติที่ค้นหาอย่างแม่นยำ

function get<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key]
}
const port = get({ host: "x", port: 80 }, "port")
console.log(port) // 80, typed as number

การอนุมานที่ใช้งานได้จริง

การเข้าถึงด้วยดัชนีช่วยหลีกเลี่ยงการทำประเภทซ้ำ โดยอนุมานประเภทอาร์กิวเมนต์ของฟังก์ชันโดยตรงจากอ็อบเจ็กต์โดเมน แทนการเขียนประเภทนั้นซ้ำอีกครั้ง

interface Order { items: { sku: string; qty: number }[] }
type LineItem = Order["items"][number] // { sku: string; qty: number }
const li: LineItem = { sku: "A1", qty: 2 }
console.log(li)

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

ทดสอบความเข้าใจเกี่ยวกับประเภทการเข้าถึงด้วยดัชนี

ทบทวน

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

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

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

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

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

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

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

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

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

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

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

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

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

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