TypeScript Academy · บทเรียน

พื้นฐานชนิดข้อมูลสตริงแบบแม่แบบ

สร้างชนิดข้อมูลสตริงจากยูเนียนและช่องแทนค่า

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

สตริงในระดับประเภท

ประเภทลิเทอรัลแม่แบบใช้สร้างประเภทสตริงลิเทอรัลใหม่โดยการรวมประเภทสตริงอื่น ๆ เข้าด้วยกัน โดยใช้ไวยากรณ์เครื่องหมายแบ็กทิกและตัวแทนตำแหน่งแบบเดียวกับสตริงแม่แบบขณะทำงาน แต่ดำเนินการกับประเภทเท่านั้น

ประเภทลิเทอรัลแม่แบบแบบง่าย

ลองนึกถึงนามแฝงประเภท Greeting ที่กำหนดเป็นลิเทอรัลแม่แบบ ซึ่งมีข้อความ Hello, ตามด้วยตัวแทนตำแหน่งสำหรับประเภท Name หาก Name เป็นลิเทอรัล 'Ada' แล้ว Greeting จะเป็นประเภทลิเทอรัล 'Hello, Ada'

type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)

ตัวแทนตำแหน่งฝังประเภทอื่นได้

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

type World = "World"
// A template literal type with text Hello,  and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)

การรวมยูเนียนเพิ่มรูปแบบเป็นทวีคูณ

เมื่อตัวแทนตำแหน่งมีค่าเป็นยูเนียน แม่แบบจะขยายครอบคลุมสมาชิกทุกตัว การรวม 'a' | 'b' เข้ากับส่วนต่อท้ายที่ตายตัวจึงสร้างยูเนียนของทุกชุดผสม

type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)

ตัวแทนตำแหน่งหลายตัวคูณเข้าด้วยกัน

ตัวแทนตำแหน่งที่เป็นยูเนียนสองตัวจะสร้างผลคูณคาร์ทีเซียน การรวม sizes 'sm' | 'lg' กับ colors 'red' | 'blue' โดยใช้ตัวคั่นจะให้ประเภทลิเทอรัลสี่รูปแบบ

type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)

เหตุใดจึงมีประโยชน์

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

type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)

ตัวเลขและบูลีนถูกแปลงเป็นสตริง

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

type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)

การใช้ตัวแทนตำแหน่งแบบเจเนอริก

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

function prefixed<T extends string>(s: T) {
  return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-home

การจำกัดอินพุต

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

type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignable

สตริงแบบกว้างทำให้รูปแบบหายไป

หากตัวแทนตำแหน่งเป็นประเภท string แบบกว้างแทนที่จะเป็นลิเทอรัล แม่แบบทั้งหมดจะยุบเหลือ string การคงความเฉพาะเจาะจงจึงต้องใช้อินพุตแบบลิเทอรัล ซึ่งมักทำผ่าน as const

const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)

ควรใช้เมื่อใด

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

type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)

ตรวจสอบความเข้าใจ

ทดสอบความเข้าใจเกี่ยวกับพื้นฐานประเภทลิเทอรัลแม่แบบ

ทบทวน

ประเภทลิเทอรัลแม่แบบสร้างประเภทสตริงลิเทอรัลโดยแทนตัวแทนตำแหน่งลงในข้อความโดยรอบ ตัวแทนตำแหน่งที่เป็นยูเนียนจะขยายเป็นทุกชุดผสม และยูเนียนหลายตัวจะสร้างผลคูณคาร์ทีเซียน ลิเทอรัลที่ไม่ใช่สตริงจะถูกแปลงเป็นรูปแบบข้อความ ตัวแทนตำแหน่ง string แบบกว้างจะทำให้ผลลัพธ์ยุบเหลือ string ดังนั้นจึงต้องใช้อินพุตแบบลิเทอรัล ซึ่งมักได้มาจาก 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

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