TypeScript Academy · บทเรียน

การกำหนดลายเซ็นดัชนี

อธิบายออบเจ็กต์ที่ไม่ทราบคีย์ล่วงหน้า

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

ออบเจ็กต์ที่มีคีย์ไม่แน่นอน

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

ไวยากรณ์พื้นฐานของลายเซ็นดัชนี

ลายเซ็นดัชนีเขียนในรูป { [key: string]: number } ซึ่งหมายความว่า คีย์ชนิดสตริงใด ๆ จะจับคู่กับค่าชนิดตัวเลข ชื่อ key เป็นเพียงป้ายกำกับ คุณจะเรียกชื่อว่าอะไรก็ได้

type Scores = { [name: string]: number }

const game: Scores = { alice: 10, bob: 7 }
console.log(game.alice) // 10

การเพิ่มคีย์แบบไดนามิก

เนื่องจากอนุญาตให้ใช้คีย์ชนิดสตริงได้ทุกค่า คุณจึงกำหนดพร็อพเพอร์ตีใหม่เอี่ยมขณะทำงานได้โดยที่ TypeScript ไม่แสดงข้อผิดพลาด นี่คือจุดประสงค์หลักของลายเซ็นดัชนี

type Scores = { [name: string]: number }

const game: Scores = {}
game.charlie = 5     // allowed
game["dave"] = 9     // also allowed
console.log(game.charlie + game.dave) // 14

การเข้าถึงคีย์ใดก็ได้

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

type Scores = { [name: string]: number }

const game: Scores = { alice: 10 }
const missing = game.zara // typed as number, but actually undefined
console.log(missing) // undefined

ค่าทั้งหมดต้องสอดคล้องกัน

พร็อพเพอร์ตีทุกตัวในออบเจ็กต์ต้องตรงกับชนิดค่าของลายเซ็น คุณไม่สามารถผสมค่าตัวเลขลงในพจนานุกรมที่มีค่าเป็นสตริงได้

type Labels = { [key: string]: string }

const ok: Labels = { id: "a1", role: "admin" }
// const bad: Labels = { id: "a1", count: 5 } // Error: 5 not a string

ลายเซ็นดัชนีในอินเทอร์เฟซ

ไวยากรณ์เดียวกันนี้ใช้ภายใน interface ได้ด้วย ซึ่งพบได้บ่อยเมื่อต้องอธิบายชุดการตั้งค่าหรือแผนที่ผลตอบกลับจาก API

interface Dictionary {
  [word: string]: string
}

const defs: Dictionary = {
  cat: "a small animal",
  ts: "a typed superset of JavaScript",
}
console.log(defs.ts)

ชนิดของค่าเป็นอะไรก็ได้

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

type Groups = { [team: string]: string[] }

const roster: Groups = {
  red: ["ana", "leo"],
  blue: ["sam"],
}
console.log(roster.red.length) // 2

การวนซ้ำออบเจ็กต์ที่มีลายเซ็นดัชนี

ลูป for...in จะเยี่ยมชมคีย์ไดนามิกแต่ละตัว ภายในลูป ค่าจะมีชนิดถูกต้องตามลายเซ็น

type Scores = { [name: string]: number }
const game: Scores = { alice: 10, bob: 7 }

for (const name in game) {
  console.log(name + ": " + game[name])
}

ช่องโหว่ด้านความปลอดภัยของ undefined

ลายเซ็นดัชนีบดบังข้อเท็จจริงที่ว่าการค้นหาอาจไม่สำเร็จ การเปิดใช้ noUncheckedIndexedAccess ใน tsconfig จะเพิ่ม | undefined ให้กับการเข้าถึงทุกครั้ง ทำให้คุณต้องจัดการกับคีย์ที่ไม่มีอยู่

// with noUncheckedIndexedAccess on:
type Scores = { [name: string]: number }
const game: Scores = { alice: 10 }
const v = game.bob // type: number | undefined
console.log(v ?? 0)

ลายเซ็นดัชนีแบบอ่านอย่างเดียว

เติม readonly ไว้หน้าลายเซ็นเพื่อห้ามเขียนผ่านคีย์ใด ๆ พจนานุกรมจะกลายเป็นโครงสร้างที่ใช้ค้นหาได้อย่างเดียว

type Frozen = { readonly [key: string]: number }

const rates: Frozen = { usd: 1, eur: 1.1 }
// rates.usd = 2 // Error: read-only
console.log(rates.eur)

จังหวะที่ลายเซ็นดัชนีมีประโยชน์

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

type Counter = { [event: string]: number }
const clicks: Counter = {}
function track(e: string) { clicks[e] = (clicks[e] ?? 0) + 1 }
track("open"); track("open")
console.log(clicks.open) // 2

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

ทดสอบความเข้าใจเกี่ยวกับลายเซ็นดัชนีของคุณ

สรุปทบทวน

คุณได้เรียนรู้ว่า { [key: string]: T } ใช้อธิบายออบเจ็กต์ที่มีคีย์ใดก็ได้ โดยค่าทั้งหมดมีชนิด T เดียวกัน สามารถเพิ่มคีย์แบบไดนามิกได้ ค่าทุกค่าต้องสอดคล้องกับลายเซ็น และการค้นหาคีย์ที่ไม่มีอยู่จะได้ค่า undefined ขณะทำงาน ใช้ readonly สำหรับแผนที่ที่แก้ไขไม่ได้ และเปิดใช้ noUncheckedIndexedAccess เพื่อให้การเข้าถึงปลอดภัยยิ่งขึ้น

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

บทเรียน “การกำหนดลายเซ็นดัชนี” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “การกำหนดลายเซ็นดัชนี”

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

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

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

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

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

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

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

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

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