การรวมคีย์ที่ทราบกับคีย์แบบไดนามิก
ผสมผสานคุณสมบัติแบบตายตัวกับลายเซ็นดัชนีอย่างปลอดภัย
การรวมคีย์ที่ทราบกับคีย์แบบไดนามิก เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ส่วนตายตัวและส่วนยืดหยุ่น
บ่อยครั้งออบเจ็กต์หนึ่งจะมีพร็อพเพอร์ตีที่รับประกันอยู่สองสามรายการ พร้อมชุดส่วนเพิ่มเติมที่เปิดกว้าง TypeScript อนุญาตให้คุณประกาศพร็อพเพอร์ตีที่มีชื่อและลายเซ็นดัชนีในชนิดเดียวกันได้ แต่มีข้อจำกัดสำคัญหนึ่งข้อ
คีย์ที่ทราบแน่ชัดร่วมกับลายเซ็น
ในที่นี้ length มีอยู่เสมอ ส่วนคีย์สตริงอื่น ๆ จะจับคู่กับค่าชนิดตัวเลข พร็อพเพอร์ตีที่มีชื่อและลายเซ็นดัชนีจึงอยู่ร่วมกันได้
interface NumberMap {
length: number
[key: string]: number
}
const m: NumberMap = { length: 2, a: 1, b: 1 }
console.log(m.length, m.a)ข้อจำกัดด้านความเข้ากันได้
ข้อควรระวังคือ ชนิดของพร็อพเพอร์ตีตายตัวทุกตัวต้องสามารถกำหนดให้กับชนิดค่าของลายเซ็นดัชนีได้ ลายเซ็นดัชนีเป็นคำรับรองเกี่ยวกับคีย์ ทั้งหมด ดังนั้นคีย์ที่มีชื่อแต่ละคีย์ต้องปฏิบัติตามคำรับรองนั้น
interface Valid {
id: number // ok: number matches the signature
[key: string]: number
}
const v: Valid = { id: 1, score: 99 }
console.log(v.id + v.score)เมื่อฝ่าฝืนข้อจำกัด
หากชนิดของพร็อพเพอร์ตีตายตัวไม่ตรงกับชนิดค่าของดัชนี TypeScript จะปฏิเสธพร็อพเพอร์ตีนั้น พร็อพเพอร์ตีที่มีชื่อเป็นสตริงไม่สามารถอยู่ในพจนานุกรมที่มีค่าเป็นตัวเลขได้
// interface Broken {
// name: string // Error: string not assignable to number
// [key: string]: number
// }การขยายชนิดค่าของดัชนี
หากต้องการรองรับชนิดที่หลากหลายของพร็อพเพอร์ตีตายตัว ให้ขยายลายเซ็นดัชนีเป็นยูเนียนที่ครอบคลุมชนิดทั้งหมด ตอนนี้ทั้งชื่อสตริงและคะแนนตัวเลขก็ใช้งานได้
interface Record {
name: string
[key: string]: string | number
}
const r: Record = { name: "ana", score: 10 }
console.log(r.name, r.score)พร็อพเพอร์ตีตายตัวแบบไม่บังคับ
พร็อพเพอร์ตีตายตัวสามารถเป็นแบบไม่บังคับได้ด้วย ? แต่เมื่อมีอยู่ก็ยังต้องเข้ากันได้กับลายเซ็นดัชนี
interface Config {
id: string
label?: string
[key: string]: string | undefined
}
const c: Config = { id: "x" }
console.log(c.label) // undefinedเหตุผลที่พร็อพเพอร์ตีไม่บังคับต้องมี undefined
เนื่องจากพร็อพเพอร์ตีแบบไม่บังคับอาจไม่มีอยู่ ชนิดที่มีผลของพร็อพเพอร์ตีจึงรวม undefined อยู่ด้วย ดังนั้นลายเซ็นดัชนีต้องอนุญาตให้มี undefined เช่นกัน มิฉะนั้น TypeScript จะแสดงข้อผิดพลาดเกี่ยวกับสมาชิกแบบไม่บังคับ
interface Safe {
title?: string
[key: string]: string | undefined
}
const s: Safe = {}
for (const k in s) console.log(s[k])ชนิดค่าที่ต่างกันผ่านยูเนียน
ตัวอย่างออบเจ็กต์การตั้งค่าที่สมจริง ได้แก่ แฟล็กบูลีนที่ทราบแน่ชัด สตริงที่ทราบแน่ชัด และค่าเพิ่มเติมใด ๆ ลายเซ็นดัชนีจะใช้ยูเนียนที่ครอบคลุมชนิดของพร็อพเพอร์ตีตายตัวทุกตัว
interface Settings {
enabled: boolean
theme: string
[key: string]: boolean | string
}
const s: Settings = { enabled: true, theme: "dark", lang: "en" }
console.log(s.enabled, s.lang)ดัชนีตัวเลขร่วมกับคีย์ที่ทราบแน่ชัด
ข้อจำกัดนี้ใช้กับลายเซ็นดัชนีชนิดตัวเลขด้วย พร็อพเพอร์ตีตัวเลขที่มีชื่อต้องตรงกับชนิดค่าของดัชนีตัวเลข
interface Sparse {
count: number
[index: number]: number
}
const sp: Sparse = { count: 1, 0: 100, 1: 200 }
console.log(sp.count, sp[0])ทางเลือกที่สะอาดกว่า
เมื่อคีย์ตายตัวและคีย์ไดนามิกมีชนิดที่ไม่เกี่ยวข้องกันจริง ๆ ให้พิจารณาแยกออกจากกัน โดยซ้อนส่วนไดนามิกไว้ใต้พร็อพเพอร์ตีของตัวเอง วิธีนี้ช่วยหลีกเลี่ยงการบังคับใช้ยูเนียนที่ไม่เหมาะสม
interface Better {
name: string
scores: { [key: string]: number }
}
const b: Better = { name: "ana", scores: { math: 90 } }
console.log(b.name, b.scores.math)เมื่อใดควรรวมกัน
รวมคีย์ที่ทราบแน่ชัดกับคีย์ไดนามิกเมื่อพร็อพเพอร์ตีตายตัวมีชนิดค่าร่วมกับส่วนเพิ่มเติมอย่างเป็นธรรมชาติ เช่น ตัวนับที่มี total หรือการตั้งค่าชนิดเดียวกันที่มีแฟล็กซึ่งรับประกันอยู่สองสามรายการ มิฉะนั้น การซ้อนโครงสร้างจะช่วยรักษาความถูกต้องของชนิด
interface Tally {
total: number
[bucket: string]: number
}
const t: Tally = { total: 0, a: 3, b: 5 }
t.total = t.a + t.b
console.log(t.total) // 8ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับการผสมคีย์ตายตัวและคีย์ไดนามิก
สรุปทบทวน
คุณสามารถประกาศพร็อพเพอร์ตีตายตัวและลายเซ็นดัชนีร่วมกันได้ แต่ชนิดของพร็อพเพอร์ตีตายตัวแต่ละตัวต้องสามารถกำหนดให้กับชนิดค่าของลายเซ็นดัชนีได้ ขยายลายเซ็นด้วยยูเนียนเพื่อรองรับชนิดของพร็อพเพอร์ตีตายตัวที่แตกต่างกัน และใส่ undefined เมื่อพร็อพเพอร์ตีตายตัวเป็นแบบไม่บังคับ หากชนิดไม่เกี่ยวข้องกันจริง ๆ ให้ซ้อนส่วนไดนามิกไว้ใต้คีย์ของตัวเองแทน
เรียนรู้ TypeScript ด้วย AI tutor — ฟรี
เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป
- คอร์ส
- 101
- บทเรียน
- 352
คำถามที่พบบ่อย
บทเรียน “การรวมคีย์ที่ทราบกับคีย์แบบไดนามิก” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การรวมคีย์ที่ทราบกับคีย์แบบไดนามิก” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การรวมคีย์ที่ทราบกับคีย์แบบไดนามิก”
ผสมผสานคุณสมบัติแบบตายตัวกับลายเซ็นดัชนีอย่างปลอดภัย คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน
บทเรียน “การรวมคีย์ที่ทราบกับคีย์แบบไดนามิก” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดลายเซ็นดัชนี
- ลายเซ็นดัชนีแบบสตริงเทียบกับตัวเลข
- การรวมคีย์ที่ทราบกับคีย์แบบไดนามิก
- ลายเซ็นดัชนีเทียบกับ Record