ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ
ดึงและบังคับใช้ตัวแปรการแทรกข้อความจากสตริง
ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
การแทนค่าที่ปลอดภัยด้านชนิด
ข้อความมักมีตัวแทนที่ เช่น "Hello, {name}" ระบบแปลภาษาที่ปลอดภัยด้านชนิดจะดึงชื่อของตัวแทนที่เหล่านั้นจากชนิดสตริงของข้อความ และกำหนดให้คุณส่งอาร์กิวเมนต์ที่ตรงกัน
เป้าหมาย
เมื่อได้รับชนิดลิเทอรัลของข้อความ เราต้องการคำนวณวัตถุตัวแปรที่ข้อความนั้นต้องใช้ เพื่อบังคับให้ t("greet", { name: "Ada" }) ถูกต้อง และให้การขาด name กลายเป็นข้อผิดพลาดขณะคอมไพล์
การดึงตัวแทนที่หนึ่งรายการ
ชนิดแบบมีเงื่อนไขของลิเทอรัลแม่แบบจะดึงชื่อของตัวแปรออกจากสตริงที่มีตัวแทนที่หนึ่งรายการ ในโค้ดจริง รูปแบบนี้เขียนด้วย backtick เป็น สตริง วงเล็บปีกกาเปิด การอนุมาน V วงเล็บปีกกาปิด สตริง ด้านล่างนี้เราเรียกตัวจับคู่ดังกล่าวว่า BraceMatch
// Real TS pattern (backtick template literal):
// matches any text, then {V}, then any text; infers V.
type Var<S extends string> =
S extends BraceMatch<infer V> ? V : never;
type A = Var<"Hello, {name}">; // "name"การดึงตัวแทนที่หลายรายการ
เวียนเกิดเพื่อรวบรวมตัวแทนที่ทุกตัวเป็นยูเนียน รูปแบบจะจับตัวแปรหนึ่งตัวพร้อมส่วนท้ายที่เหลือ แล้วเวียนเกิดกับส่วนท้ายต่อไป
// Pattern: any text, {V}, then Rest tail -- infer V and Rest.
type Vars<S extends string> =
S extends BraceMatchRest<infer V, infer Rest>
? V | Vars<Rest>
: never;
type B = Vars<"Hi {first} {last}!">; // "first" | "last"จากชื่อสู่ Args Object
แปลงยูเนียนของชื่อให้เป็นชนิดวัตถุที่ต้องระบุค่าด้วยชนิดแบบแมป
type ArgsOf<S extends string> = {
[K in Vars<S>]: string | number;
};
type G = ArgsOf<"Hello, {name}">;
// { name: string | number }ไม่มีตัวแทนที่ ก็ไม่มีอาร์กิวเมนต์
เมื่อข้อความไม่มีตัวแทนที่ Vars จะเป็น never ดังนั้นวัตถุอาร์กิวเมนต์จึงว่างเปล่า ในกรณีนี้เราสามารถทำให้พารามิเตอร์อาร์กิวเมนต์เป็นตัวเลือกได้
type C = Vars<"Goodbye">; // never
type D = ArgsOf<"Goodbye">; // {} (empty)ฟังก์ชันแปลที่มีชนิด
ทำให้พารามิเตอร์อาร์กิวเมนต์ขึ้นอยู่กับคีย์ที่เลือก โดยค้นหาลิเทอรัลของข้อความและคำนวณอาร์กิวเมนต์ของข้อความนั้น
declare const messages: {
greet: "Hello, {name}";
invite: "Join {count} others";
};
declare function t<K extends keyof typeof messages>(
key: K,
args: ArgsOf<(typeof messages)[K]>
): string;การบังคับใช้จริง
ตอนนี้คอมไพเลอร์จะกำหนดให้ใช้ตัวแปรตรงตามที่ข้อความแต่ละรายการประกาศไว้ทุกประการ
t("greet", { name: "Ada" }); // ok
t("greet", {}); // Error: name is missing
t("invite", { count: 3 }); // ok
t("invite", { name: "x" }); // Error: count missing, name unexpectedอาร์กิวเมนต์ตัวเลือกสำหรับข้อความธรรมดา
ใช้โอเวอร์โหลดแบบมีเงื่อนไข เพื่อให้ข้อความที่ไม่มีตัวแทนที่ไม่จำเป็นต้องมีอาร์กิวเมนต์ที่สองเลย
type MaybeArgs<S extends string> =
Vars<S> extends never ? [] : [args: ArgsOf<S>];
declare function t2<K extends keyof typeof messages>(
key: K,
...rest: MaybeArgs<(typeof messages)[K]>
): string;ตัวคั่นแบบกำหนดเอง
หากแค็ตตาล็อกของคุณใช้ {{name}} หรือ %{name} ให้ปรับรูปแบบลิเทอรัลแม่แบบใน Vars ให้สอดคล้อง เทคนิคยังคงเหมือนเดิม มีเพียงลิเทอรัลที่อยู่ล้อมรอบเท่านั้นที่เปลี่ยนไป
เหตุใดเรื่องนี้จึงสำคัญ
ตัวแปรสำหรับการแทรกค่าที่ขาดหายไปหรือพิมพ์ชื่อผิดเป็นสาเหตุสำคัญที่ทำให้ข้อความในส่วนติดต่อผู้ใช้เสียหาย ("Hello, undefined") การดึงตัวแปรเหล่านี้ออกมาในระดับชนิดทำให้ปัญหาเหล่านี้กลายเป็นข้อผิดพลาดขณะคอมไพล์ และบันทึกข้อกำหนดของแต่ละข้อความไว้อย่างชัดเจน
ตรวจสอบอย่างรวดเร็ว
ทดสอบความเข้าใจเกี่ยวกับความปลอดภัยด้านชนิดของการแทรกค่า
สรุปทบทวน
ด้วยการจับคู่รูปแบบของ ชนิดลิเทอรัล ของข้อความโดยใช้ลิเทอรัลแม่แบบและ infer คุณสามารถดึงชื่อช่องแทนค่าออกมาเป็นยูเนียน จับคู่ชื่อเหล่านั้นกับออบเจ็กต์อาร์กิวเมนต์ที่จำเป็น และทำให้ฟังก์ชันแปลข้อความต้องการตัวแปรเหล่านั้นโดยตรง โดยให้อาร์กิวเมนต์เป็นตัวเลือกเมื่อไม่มีตัวแปร
คำถามที่พบบ่อย
บทเรียน “ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การกำหนดชนิดข้อมูลให้คีย์การแปล
- ความปลอดภัยด้านชนิดข้อมูลของการแทรกข้อความ
- การทำพหูพจน์ด้วยชนิดข้อมูล
- การอนุมานชนิดข้อมูลตามภาษาและภูมิภาค