การทำพหูพจน์ด้วยชนิดข้อมูล
จำลองรูปแบบพหูพจน์อย่างปลอดภัยด้านชนิดข้อมูล
การทำพหูพจน์ด้วยชนิดข้อมูล เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การทำพหูพจน์ที่ปลอดภัยด้านชนิดข้อมูล
ภาษาต่าง ๆ จำเป็นต้องมีรูปพหูพจน์ เช่น "1 item" กับ "2 items" ระบบสากลภิวัตน์ที่ปลอดภัยด้านชนิดข้อมูลจะจำลอง หมวดหมู่พหูพจน์ (เช่น one / other) และกำหนดให้ต้องมีอาร์กิวเมนต์ count เพื่อไม่ให้ลืมระบุจำนวน
หมวดหมู่พหูพจน์
กฎพหูพจน์ของ Intl กำหนดหมวดหมู่ต่าง ๆ เช่น zero, one, two, few, many, other ภาษาอังกฤษใช้เพียง one และ other ส่วนภาษาท้องถิ่นอื่นอาจใช้มากกว่านั้น
type PluralCategory = "zero" | "one" | "two" | "few" | "many" | "other";รูปแบบของข้อความพหูพจน์
แทนข้อความพหูพจน์ด้วยออบเจ็กต์ที่ใช้หมวดหมู่เป็นคีย์ โดย other คือทางเลือกสำรองที่จำเป็นต้องมี
type PluralMessage = {
other: string;
} & Partial<Record<Exclude<PluralCategory, "other">, string>>;
const items: PluralMessage = {
one: "{count} item",
other: "{count} items",
};การแยกพหูพจน์ออกจากข้อความทั่วไป
แค็ตตาล็อกหนึ่งอาจมีทั้งสตริงทั่วไปและออบเจ็กต์พหูพจน์ ข้อกำหนดของอาร์กิวเมนต์แตกต่างกัน ดังนั้นเราจึงตรวจจับรูปแบบเหล่านี้ในระดับชนิด
type IsPlural<M> = M extends { other: string } ? true : false;การกำหนดให้ต้องมี count
เมื่อข้อความเป็นพหูพจน์ อาร์กิวเมนต์ของฟังก์ชันแปลข้อความต้องมีค่า count เป็นตัวเลข เราคำนวณชนิดของอาร์กิวเมนต์แบบมีเงื่อนไข
type PluralArgs<M> = IsPlural<M> extends true
? { count: number }
: {};
type A = PluralArgs<typeof items>; // { count: number }ฟังก์ชันแปลข้อความที่มีชนิดสำหรับพหูพจน์
รวมการค้นหาจากแค็ตตาล็อกเข้ากับอาร์กิวเมนต์แบบมีเงื่อนไข เพื่อให้ข้อความพหูพจน์ต้องมี count ส่วนข้อความทั่วไปไม่ต้องมี
declare const cat: {
items: { one: string; other: string };
hello: string;
};
declare function t<K extends keyof typeof cat>(
key: K,
args: PluralArgs<(typeof cat)[K]>
): string;
t("items", { count: 3 }); // ok
t("items", {}); // Error: count required
t("hello", {}); // okการเลือกรูปแบบขณะทำงาน
ขณะทำงาน Intl.PluralRules จะเลือกหมวดหมู่จากจำนวน แล้วคุณจึงอ่านสตริงที่ตรงกัน (โดยใช้ other เป็นทางเลือกสำรอง)
function plural(msg: { other: string; [k: string]: string }, count: number, locale: string) {
const cat = new Intl.PluralRules(locale).select(count);
return (msg[cat] ?? msg.other);
}การรวมเข้ากับการแทรกค่า
โดยทั่วไปสตริงพหูพจน์จะมี {count} อยู่ด้วย ชนิดของอาร์กิวเมนต์สามารถรวมข้อกำหนดของพหูพจน์เข้ากับตัวแปรการแทรกค่าที่ดึงมาจากรูปแบบที่เลือกได้
type FullArgs<M> = PluralArgs<M> & ExtractVars<M>;
// count plus any {placeholders} in the messageภาษาท้องถิ่นที่มีรูปแบบหลากหลายกว่า
ภาษาท้องถิ่นบางภาษา (เช่น ภาษาโปแลนด์และภาษารัสเซีย) ใช้ few และ many เนื่องจาก PluralCategory มีหมวดหมู่เหล่านี้อยู่แล้ว แค็ตตาล็อกจึงสามารถระบุคีย์เหล่านั้นได้ และกลไกเดิมจะจัดการให้โดยอัตโนมัติ
const ruItems = {
one: "{count} товар",
few: "{count} товара",
many: "{count} товаров",
other: "{count} товара",
};การบังคับให้มีทางเลือกสำรองสำหรับกรณีอื่น
เนื่องจาก other จำเป็นต้องมีใน PluralMessage ระบบชนิดจึงรับประกันว่ามีทางเลือกสำรอง ป้องกันกรณีขณะทำงานที่ไม่มีรูปแบบพหูพจน์ใดตรงกัน
เหตุใดเรื่องนี้จึงสำคัญ
ข้อผิดพลาดเกี่ยวกับพหูพจน์ (เช่น "1 items") และการลืมระบุจำนวนพบได้บ่อยในระบบสากลภิวัตน์ที่ไม่มีชนิด การจำลองหมวดหมู่เป็นชนิดและกำหนดให้ต้องมี count ทำให้การทำพหูพจน์ที่ถูกต้องเป็นค่าเริ่มต้น และทำให้การขาดจำนวนกลายเป็นข้อผิดพลาดขณะคอมไพล์
ตรวจสอบอย่างรวดเร็ว
ตรวจสอบความเข้าใจเกี่ยวกับการทำพหูพจน์ที่ปลอดภัยด้านชนิดข้อมูล
สรุปทบทวน
คุณจำลองพหูพจน์เป็นออบเจ็กต์ที่ใช้ หมวดหมู่พหูพจน์ เป็นคีย์ โดยมีทางเลือกสำรอง other ที่จำเป็นต้องมี ตรวจจับข้อความพหูพจน์ในระดับชนิด และกำหนดให้อาร์กิวเมนต์ count เป็นตัวเลขผ่านชนิดแบบมีเงื่อนไข ขณะทำงาน Intl.PluralRules จะเลือกรูปแบบ และกลไกเดียวกันนี้รองรับภาษาท้องถิ่นที่มีรูปแบบหลากหลายกว่าได้
คำถามที่พบบ่อย
บทเรียน “การทำพหูพจน์ด้วยชนิดข้อมูล” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การทำพหูพจน์ด้วยชนิดข้อมูล” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดชนิดข้อมูลให้คีย์การแปล
- ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ
- การทำพหูพจน์ด้วยชนิดข้อมูล
- การอนุมานชนิดข้อมูลตามภาษาและภูมิภาค