TypeScript Academy · บทเรียน

ลายเซ็นดัชนีแบบสตริงเทียบกับตัวเลข

ทำความเข้าใจกฎและข้อควรรู้ของคีย์ตัวเลข

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

คีย์ดัชนีสองชนิด

TypeScript รองรับลายเซ็นดัชนีทั้งชนิด สตริง และ ตัวเลข แม้จะมีรูปแบบคล้ายกัน แต่ทำงานต่างกันเนื่องจากวิธีที่ JavaScript จัดเก็บคีย์ของออบเจ็กต์จริง ๆ

ลายเซ็นดัชนีชนิดตัวเลข

ลายเซ็นดัชนีชนิดตัวเลข { [i: number]: T } ใช้อธิบายออบเจ็กต์ที่จัดทำดัชนีด้วยตำแหน่งตัวเลข ซึ่งเหมาะอย่างยิ่งกับอาร์เรย์และโครงสร้างที่มีลักษณะเหมือนอาร์เรย์

type NumberList = { [index: number]: string }

const names: NumberList = { 0: "ana", 1: "leo" }
console.log(names[0]) // ana

JS เปลี่ยนคีย์ตัวเลขเป็นสตริง

ข้อเท็จจริงสำคัญคือ คีย์ของออบเจ็กต์ใน JavaScript เป็นสตริงเสมอ เมื่อคุณเขียน obj[0] กลไกภายในจะจัดเก็บคีย์เป็นสตริง "0" จริง ๆ TypeScript จำลองความเป็นจริงนี้

const obj: Record<string, string> = {}
obj[1] = "one"
console.log(obj["1"]) // one — same key!
console.log(Object.keys(obj)) // ["1"]

กฎความเข้ากันได้

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

interface Mixed {
  [key: string]: string
  [index: number]: string // must match the string value type
}
const m: Mixed = { 0: "a", name: "b" }
console.log(m[0], m.name)

เหตุผลที่มีกฎนี้

หาก obj[0] และ obj["0"] อ้างถึงช่องเดียวกัน ชนิดค่าจะเป็นตัวเลขสำหรับแบบหนึ่งและเป็นสตริงสำหรับอีกแบบหนึ่งไม่ได้ ดังนั้นค่าของดัชนีตัวเลขต้องเป็นชนิดย่อยของค่าดัชนีสตริงเพื่อให้สอดคล้องกัน

// This is an ERROR:
// interface Bad {
//   [key: string]: string
//   [index: number]: number // number not assignable to string
// }

อาร์เรย์ที่จัดทำดัชนีด้วยตัวเลข

อาร์เรย์เป็นชนิดมาตรฐานที่จัดทำดัชนีด้วยตัวเลข ชนิดในตัว Array<T> มีลักษณะเทียบเท่ากับการมีลายเซ็นดัชนีชนิดตัวเลข จึงทำให้ arr[i] ส่งค่าชนิด T กลับมา

const nums: number[] = [10, 20, 30]
const first: number = nums[0]
console.log(first + nums[2]) // 40

ทูเพิลก็จัดทำดัชนีด้วยตัวเลขเช่นกัน

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

const pair: [string, number] = ["age", 30]
const label: string = pair[0]
const value: number = pair[1]
console.log(label + ": " + value)

ดัชนีสตริงรองรับการค้นหาทั้งสองแบบ

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

type Bag = { [key: string]: number }
const b: Bag = {}
b[5] = 100        // stored as key "5"
console.log(b["5"]) // 100

ดัชนีตัวเลขไม่รองรับสตริง

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

type OnlyNumbers = { [i: number]: string }
const o: OnlyNumbers = { 0: "x" }
// o.name = "y" // Error: property name not on number-indexed type
console.log(o[0])

การเลือกใช้ระหว่างสองแบบ

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

type Positions = { [i: number]: { x: number; y: number } }
type ByName = { [name: string]: { x: number; y: number } }
const p: Positions = { 0: { x: 1, y: 2 } }
console.log(p[0].x)

ออบเจ็กต์แบบผสมที่ใช้งานได้จริง

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

interface Flexible {
  [key: string]: number
  [index: number]: number
}
const f: Flexible = { 0: 1, total: 99 }
console.log(f[0] + f.total) // 100

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

ทดสอบความเข้าใจเกี่ยวกับลายเซ็นดัชนีชนิดสตริงและตัวเลข

สรุปทบทวน

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

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

บทเรียน “ลายเซ็นดัชนีแบบสตริงเทียบกับตัวเลข” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “ลายเซ็นดัชนีแบบสตริงเทียบกับตัวเลข”

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

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

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

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

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

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

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

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

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