TypeScript Academy · บทเรียน

การอนุมานชนิดข้อมูลตามภาษาและภูมิภาค

ตรวจสอบให้ทุกภาษาและภูมิภาคใช้โครงสร้างคีย์เดียวกัน

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

การอนุมานชนิดตามภาษาท้องถิ่น

แอปหนึ่งรองรับภาษาท้องถิ่นหลายภาษา (en, tr, de...) เราต้องการชนิดที่ แจ้งข้อผิดพลาดเมื่อภาษาท้องถิ่นใดขาดคีย์ที่มีอยู่ในภาษาพื้นฐาน เพื่อไม่ให้คำแปลคลาดเคลื่อนจากกันโดยไม่มีการแจ้งเตือน

ภาษาพื้นฐาน

เลือกภาษาท้องถิ่นหนึ่งภาษา (โดยทั่วไปคือ en) เป็นโครงสร้างคีย์มาตรฐาน ภาษาท้องถิ่นอื่นทั้งหมดต้องมีรูปแบบตรงกัน

const en = {
  greeting: "Hello",
  cart: { empty: "Empty", checkout: "Checkout" },
} as const;

type Base = typeof en;

การจำกัดภาษาท้องถิ่นอื่น

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

const tr: Base = {
  greeting: "Merhaba",
  cart: { empty: "Bo\u015f", checkout: "\u00d6deme" },
};
// Omitting cart.checkout -> Error: property missing

การตรวจจับคีย์ส่วนเกินด้วย

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

const de: Base = {
  greeting: "Hallo",
  cart: { empty: "Leer", checkout: "Kasse" },
  extra: "oops", // Error: not in Base
};

ตัวช่วยสำหรับกำหนดภาษาท้องถิ่น

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

function defineLocale<T extends Base>(loc: T): T {
  return loc;
}

const fr = defineLocale({
  greeting: "Bonjour",
  cart: { empty: "Vide", checkout: "Paiement" },
});

ทะเบียนภาษาท้องถิ่นทั้งหมด

รวบรวมภาษาท้องถิ่นไว้ในระเบียน การจำกัดค่าแต่ละค่าให้เป็น Base รับประกันว่าโครงสร้างจะสม่ำเสมอทั่วทั้งแอป

const locales: Record<string, Base> = { en, tr, de: fr };
// every entry must have the full Base key structure

ความเท่าเทียมระดับชนิด (เชิงลึก)

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

type SameKeys<A, B> =
  keyof A extends keyof B
    ? keyof B extends keyof A ? true : false
    : false;

การอนุมานคีย์เพียงครั้งเดียว

เนื่องจากภาษาท้องถิ่นทั้งหมดใช้ Base ร่วมกัน ชนิดเส้นทางคีย์ (จากบทเรียนก่อนหน้า) จึงคำนวณจาก Base เพียงครั้งเดียวและนำกลับมาใช้กับทุกภาษา ทำให้การกำหนดชนิดของฟังก์ชันแปลข้อความไม่ขึ้นกับภาษาท้องถิ่น

type Key = LeafPaths<Base>;
// same valid keys regardless of active locale

การเลือกภาษาท้องถิ่นขณะทำงาน

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

function translate(locale: keyof typeof locales, key: Key): string {
  return getPath(locales[locale], key);
}

การตรวจจับคีย์ที่ขาดหายไปในภาษาท้องถิ่นต่าง ๆ

หากไม่สามารถกำหนดชนิดให้ทุกไฟล์ได้โดยตรง (เช่น การนำเข้าไฟล์เจสัน) การตรวจสอบชนิดขณะสร้างจะเปรียบเทียบภาษาท้องถิ่นที่นำเข้าแต่ละภาษากับ Base และแสดงชนิดความแตกต่างที่ระบุคีย์ที่ขาดหายไป

type Missing<L> = Exclude<keyof Base, keyof L>;
type TrMissing = Missing<typeof tr>; // never if complete

เหตุใดเรื่องนี้จึงสำคัญ

ระบบสากลภิวัตน์ที่ไม่มีชนิดจะค่อย ๆ คลาดเคลื่อน: มีการเพิ่มคีย์ใน en แต่ลืมเพิ่มใน de ทำให้แอปแสดงค่าว่างหรือข้อความภาษาอังกฤษ การจำกัดภาษาท้องถิ่นทุกภาษาให้ใช้ภาษาพื้นฐานร่วมกันจะเปลี่ยนการละเลยดังกล่าวให้เป็น ข้อผิดพลาดขณะคอมไพล์ และช่วยให้ทุกภาษาท้องถิ่นครบถ้วนสอดคล้องกัน

ตรวจสอบอย่างรวดเร็ว

ยืนยันความเข้าใจเกี่ยวกับการอนุมานชนิดตามภาษาท้องถิ่น

สรุปทบทวน

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

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

บทเรียน “การอนุมานชนิดข้อมูลตามภาษาและภูมิภาค” ฟรีหรือไม่

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

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

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

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

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

บทเรียน “การอนุมานชนิดข้อมูลตามภาษาและภูมิภาค” ใช้เวลานานแค่ไหน

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

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

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

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

การกำหนดชนิดข้อมูลให้คีย์การแปล
ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ
การทำพหูพจน์ด้วยชนิดข้อมูล
การอนุมานชนิดข้อมูลตามภาษาและภูมิภาค

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