การกำหนดชนิดข้อมูลให้คีย์การแปล
อนุมานยูเนียนของคีย์ที่ถูกต้องจากไฟล์ข้อความ
การกำหนดชนิดข้อมูลให้คีย์การแปล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 1 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การสร้างคีย์การแปลที่ถูกต้องโดยอนุมาน
ในการตั้งค่าระบบแปลภาษาที่ปลอดภัยด้านชนิด ชุดคีย์การแปลที่ถูกต้องจะอนุมานจากวัตถุ messages ของคุณ ข้อผิดพลาดในการพิมพ์ เช่น t("greetng") จะกลายเป็นข้อผิดพลาดขณะคอมไพล์ ไม่ใช่ข้อผิดพลาดจากสตริงที่หายไปขณะรันไทม์
วัตถุ messages
เริ่มจากวัตถุ messages ธรรมดาที่เก็บข้อความ วัตถุนี้เป็นแหล่งข้อมูลจริงเพียงแหล่งเดียวสำหรับทั้งค่าและชนิดคีย์
const messages = {
greeting: "Hello",
farewell: "Goodbye",
cart: {
empty: "Your cart is empty",
checkout: "Proceed to checkout",
},
} as const;คีย์ระดับบนสุดด้วยตัวดำเนินการหาคีย์
สำหรับวัตถุแบบแบน keyof typeof จะให้ยูเนียนของคีย์ทั้งหมด
type TopKeys = keyof typeof messages;
// "greeting" | "farewell" | "cart"ปัญหาของโครงสร้างซ้อนกัน
แค็ตตาล็อกข้อความจริงมักมีโครงสร้างซ้อนกัน เราต้องการเส้นทางแบบมีจุด เช่น "cart.empty" ไม่ใช่แค่คีย์ระดับบนสุด จึงต้องมีชนิดแบบเวียนเกิดที่เดินไปตามวัตถุ
ชนิดเส้นทางแบบเวียนเกิด
ชนิดแบบมีเงื่อนไขและชนิดแบบแมปจะสร้างเส้นทางที่มีจุดด้วยการเวียนเข้าไปในวัตถุซ้อนกันและเติมคำนำหน้าคีย์ คำนำหน้าใช้ชนิดลิเทอรัลแม่แบบ ซึ่งในโค้ดจริงเขียนด้วยเครื่องหมาย backtick เป็น [backtick]${K}.${Paths<T[K]>}[backtick] ด้านล่างนี้เราแสดงในรูป JoinPath(K, child) เพื่อให้รายการอ่านง่าย
type JoinPath<K extends string, Rest extends string> = K + "." + Rest;
// (Real TS uses a template literal type:
// the K dot Rest pattern delimited by backticks.)
type Paths<T> = {
[K in keyof T & string]: T[K] extends string
? K
: K | (T[K] extends object
? JoinPath<K, Paths<T[K]>>
: never);
}[keyof T & string];การนำไปใช้
การป้อนชนิดของ messages ให้กับ Paths จะให้คีย์แบบมีจุดที่ถูกต้องทั้งหมด
type MsgKey = Paths<typeof messages>;
// "greeting" | "farewell" | "cart" | "cart.empty" | "cart.checkout"คีย์เฉพาะโหนดปลายทาง
บ่อยครั้งคุณอาจต้องการเฉพาะเส้นทางของโหนดปลายทาง ซึ่งเป็นสตริงจริง โดยไม่รวมวัตถุตรงกลาง ให้ปรับการเวียนเกิดเพื่อข้ามโหนดที่ไม่ใช่สตริง คำนำหน้ารูป K-จุด-ส่วนลูกก็ใช้ชนิดลิเทอรัลแม่แบบเช่นกัน โดยในโค้ดจริงจะคั่นด้วย backtick และแสดงไว้ที่นี่เป็น JoinPath
type LeafPaths<T> = T extends string
? ""
: {
[K in keyof T & string]: T[K] extends string
? K
: JoinPath<K, LeafPaths<T[K]>>;
}[keyof T & string];
// "greeting" | "farewell" | "cart.empty" | "cart.checkout"ฟังก์ชัน t แบบมีชนิด
จำกัดพารามิเตอร์ของฟังก์ชันแปลให้เป็นยูเนียนของคีย์ที่อนุมานได้ เพื่อให้คอมไพล์ได้เฉพาะคีย์ที่ถูกต้อง
declare function t(key: LeafPaths<typeof messages>): string;
t("cart.empty"); // ok
t("cart.missing"); // Error: not a valid keyการหาชนิดค่าที่เส้นทาง
คุณสามารถไปได้ไกลกว่านั้นด้วยการอนุมานชนิดค่าที่เส้นทางหนึ่ง ซึ่งมีประโยชน์เมื่อข้อความมีรายการที่ไม่ใช่สตริง ชนิดแบบมีเงื่อนไขสำหรับจัดทำดัชนีเส้นทางจะเดินไปตามจุดต่าง ๆ โดยแยกเส้นทางด้วยรูปแบบชนิดลิเทอรัลแม่แบบ ซึ่งในโค้ดจริงเขียนด้วย backtick เป็นรูปแบบส่วนหัว จุด และส่วนที่เหลือ พร้อมการอนุมานชนิด ด้านล่างนี้เราแทนการแยกดังกล่าวด้วย SplitHead/SplitRest
// Conceptually: split "cart.empty" into Head="cart", Rest="empty"
// using a template literal pattern with infer.
type ValueAt<T, P extends string> =
P extends SplitHead<infer Head, infer Rest>
? Head extends keyof T ? ValueAt<T[Head], Rest> : never
: P extends keyof T ? T[P] : never;เหตุใด as const จึงสำคัญ
หากไม่มี as const ค่าสตริงจะขยายเป็น string และคุณจะสูญเสียข้อมูลลิเทอรัลที่จำเป็นในภายหลัง เช่น การดึงข้อมูลตัวแทนที่ ต้องประกาศแค็ตตาล็อกเป็นค่าคงที่เสมอ
เหตุใดจึงสำคัญ
การอนุมานคีย์จากแค็ตตาล็อกหมายความว่าการเพิ่ม เปลี่ยนชื่อ หรือลบข้อความจะอัปเดตชนิดคีย์ที่อนุญาตในทุกที่ทันที ไม่ต้องมี enum กลางให้ดูแล และไม่มีค่าคงที่สตริงที่ล้าสมัย
ตรวจสอบความเข้าใจ
ยืนยันความเข้าใจเกี่ยวกับการกำหนดชนิดให้คีย์การแปลของคุณ
สรุปทบทวน
คุณอนุมานยูเนียนของคีย์ที่ถูกต้องจากวัตถุ messages โดยใช้ keyof ร่วมกับชนิดเส้นทางลิเทอรัลแม่แบบแบบเวียนเกิด รูปแบบเฉพาะโหนดปลายทางจะไม่รวมวัตถุตรงกลาง ฟังก์ชัน t ที่มีชนิดจะปฏิเสธคีย์ที่ไม่ถูกต้อง และ as const จะรักษาข้อมูลลิเทอรัลที่กลไกชนิดจำเป็นต้องใช้
คำถามที่พบบ่อย
บทเรียน “การกำหนดชนิดข้อมูลให้คีย์การแปล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การกำหนดชนิดข้อมูลให้คีย์การแปล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดชนิดข้อมูลให้คีย์การแปล
- ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ
- การทำพหูพจน์ด้วยชนิดข้อมูล
- การอนุมานชนิดข้อมูลตามภาษาและภูมิภาค