ยูเนียนสตริงและการเติมข้อความอัตโนมัติ
รับการเติมข้อความอัตโนมัติในเครื่องมือแก้ไขสำหรับค่าสตริงที่ทราบ
ยูเนียนสตริงและการเติมข้อความอัตโนมัติ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 3 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ยูเนียนช่วยขับเคลื่อนการเติมข้อความอัตโนมัติ
ยูเนียนของสตริงลิเทอรัลทำหน้าที่สองอย่าง คือจำกัดค่าที่อนุญาตและป้อนตัวเลือกให้การเติมข้อความอัตโนมัติของเครื่องมือแก้ไข แต่บางครั้งคุณอาจต้องการทั้งคำแนะนำและอิสระในการส่งสตริงใด ๆ ซึ่งมีกลเม็ดที่ช่วยจัดการเรื่องนี้ได้
ยูเนียนสตริงลิเทอรัลพื้นฐาน
ประกาศยูเนียนของสตริงที่อนุญาต เครื่องมือแก้ไขจะแสดงตัวเลือกเหล่านี้โดยเฉพาะ และค่าที่ไม่ถูกต้องจะทำให้เกิดข้อผิดพลาดขณะคอมไพล์
type Variant = "primary" | "secondary" | "danger"
const v: Variant = "primary"
console.log(v)
// const bad: Variant = "warning" // Errorการเติมข้อความอัตโนมัติในเครื่องมือแก้ไข
เมื่อพารามิเตอร์เป็นยูเนียนของสตริงลิเทอรัล การพิมพ์ภายในการเรียกใช้จะแสดงสมาชิกที่ตรงกันขึ้นมา นี่คือความสะดวกในการใช้งานอย่างหนึ่งที่ผู้ใช้ TypeScript ชื่นชอบมาก
type Color = "red" | "green" | "blue"
function paint(c: Color) { return c }
console.log(paint("green")) // editor suggests red/green/blueข้อจำกัด
ยูเนียนแบบเข้มงวดจะห้ามค่าทุกค่าที่อยู่นอกเหนือรายการ บางครั้งคุณต้องการแนะนำค่าที่ใช้กันทั่วไปไปพร้อมกับยังอนุญาตให้ใช้สตริงแบบกำหนดเองได้ แต่ยูเนียนธรรมดาไม่สามารถทำทั้งสองอย่างนี้ได้
type Color = "red" | "green"
// You cannot pass "#ff8800" — it is not in the union
function paint(c: Color) { return c }
console.log(paint("red"))การขยายประเภททำให้คำแนะนำหายไป
หากใช้ string โดยตรง ค่าทุกชนิดจะใช้ได้ แต่การเติมข้อความอัตโนมัติจะหายไปทั้งหมด เท่ากับแลกคำแนะนำทั้งหมดกับความยืดหยุ่นเต็มที่ ซึ่งไม่ใช่ทางเลือกที่เหมาะเสมอไป
function paint(c: string) { return c }
console.log(paint("#ff8800")) // works, but no suggestionsกลเม็ดสตริงและ LiteralUnion
กลเม็ดนี้คือการรวมลิเทอรัลของคุณเข้ากับ string & {} ลิเทอรัลยังคงปรากฏในการเติมข้อความอัตโนมัติ ขณะที่ string & {} อนุญาตให้ใช้สตริงอื่น ๆ ได้โดยไม่ทำให้ยูเนียนยุบรวมกัน
type Color = "red" | "green" | (string & {})
const a: Color = "red" // suggested
const b: Color = "#ff8800" // also allowed
console.log(a, b)เหตุใดสตริงกับอ็อบเจ็กต์ว่างจึงใช้ได้
โดยปกติ 'red' | string จะถูกลดรูปเหลือเพียง string ทำให้ลิเทอรัลหายไป การนำไปตัดกับ {} จะสร้างประเภทที่แตกต่างออกไปเล็กน้อย ซึ่ง TypeScript จะเก็บแยกไว้ ทำให้ลิเทอรัลยังคงอยู่เพื่อใช้เติมข้อความ ขณะเดียวกันสตริงใด ๆ ก็ยังใช้ได้
type A = "red" | string // collapses to string — no hints
type B = "red" | (string & {}) // keeps "red" as a suggestion
const x: B = "red"
console.log(x)ตัวช่วยที่นำกลับมาใช้ซ้ำได้
ห่อกลเม็ดนี้ไว้ในนามแฝงแบบเจเนอริก เพื่อให้เจตนาชัดเจนและนำกลับมาใช้ซ้ำได้ทั่วทั้งฐานโค้ด
type LiteralUnion<T extends string> = T | (string & {})
type Size = LiteralUnion<"sm" | "md" | "lg">
const s: Size = "custom-size"
console.log(s)การนำไปใช้กับฟังก์ชัน
ใช้ตัวช่วยนี้ในส่วนติดต่อโปรแกรม เพื่อให้ผู้เรียกได้รับคำแนะนำสำหรับอินพุตที่ใช้กันทั่วไป ขณะเดียวกันก็ยังยอมรับค่าที่กำหนดเองได้
type LiteralUnion<T extends string> = T | (string & {})
function setIcon(name: LiteralUnion<"home" | "search">) { return name }
console.log(setIcon("home")) // suggested
console.log(setIcon("my-icon")) // allowedควรใช้กลเม็ดนี้เมื่อใด
เลือกใช้เมื่อส่วนติดต่อโปรแกรมมีค่าที่เป็นที่รู้จักกันดี แต่ยังต้องเปิดให้ใช้ค่าอื่นได้ เช่น ชื่อไอคอน หน่วย CSS โทเค็น theme และค่าที่ตั้งไว้ล่วงหน้าของเฟรมเวิร์ก สำหรับชุดค่าที่ปิดตาย ควรใช้ยูเนียนแบบเข้มงวดเพื่อความปลอดภัยอย่างเต็มที่
type LiteralUnion<T extends string> = T | (string & {})
type Unit = LiteralUnion<"px" | "rem" | "%">
const u: Unit = "vh"
console.log(u)ข้อแลกเปลี่ยน
กลเม็ดนี้ยังคงให้คำแนะนำ แต่ลดความปลอดภัยลง เพราะจะไม่ตรวจจับการพิมพ์ผิดในสตริงแบบกำหนดเอง ควรใช้โดยเจตนาในกรณีที่การเปิดรับค่าเป็นคุณสมบัติที่ต้องการ ไม่ควรใช้เป็นค่าเริ่มต้น
type LiteralUnion<T extends string> = T | (string & {})
type Status = LiteralUnion<"active" | "inactive">
const s: Status = "actvie" // typo NOT caught — the cost of openness
console.log(s)ตรวจสอบความเข้าใจ
ทดสอบความเข้าใจเกี่ยวกับกลเม็ดการเติมข้อความอัตโนมัติ
ทบทวน
ยูเนียนของสตริงลิเทอรัลช่วยขับเคลื่อนการเติมข้อความอัตโนมัติของเครื่องมือแก้ไขและจำกัดค่า แต่ยูเนียนแบบเข้มงวดจะห้ามสตริงแบบกำหนดเอง ขณะที่ string ธรรมดาจะทำให้คำแนะนำทั้งหมดหายไป กลเม็ด T | (string & {}) ช่วยเก็บลิเทอรัลไว้เป็นคำแนะนำพร้อมกับยอมรับสตริงใด ๆ ห่อกลเม็ดนี้เป็นตัวช่วย LiteralUnion<T> และใช้เฉพาะในกรณีที่ตั้งใจเปิดรับค่า เพราะต้องแลกกับความปลอดภัยในการตรวจจับการพิมพ์ผิด
คำถามที่พบบ่อย
บทเรียน “ยูเนียนสตริงและการเติมข้อความอัตโนมัติ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ยูเนียนสตริงและการเติมข้อความอัตโนมัติ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานชนิดข้อมูลสตริงแบบแม่แบบ
- การจำลองสตริงที่มีโครงสร้าง
- ยูเนียนสตริงและการเติมข้อความอัตโนมัติ
- ชนิดข้อมูลจัดการสตริงในตัว