TypeScript Academy · บทเรียน

การจำลองสตริงที่มีโครงสร้าง

บังคับใช้รูปแบบต่าง ๆ เช่น ชื่อเหตุการณ์และเส้นทางเราเตอร์

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

การบังคับใช้รูปแบบสตริง

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

การจำลองชื่อส่วนจัดการเหตุการณ์

ชื่อส่วนจัดการมักมีรูปแบบเป็น on ตามด้วยเหตุการณ์ที่ขึ้นต้นด้วยตัวพิมพ์ใหญ่ การใช้ตัวช่วยภายใน Capitalize ในแม่แบบ เหตุการณ์ 'click' จะถูกแปลงเป็นชื่อส่วนจัดการ 'onClick'

type Event = "click" | "focus"
// template: on followed by Capitalize of Event
// => "onClick" | "onFocus"
const h: "onClick" | "onFocus" = "onClick"
console.log(h)

เหตุใด Capitalize จึงสำคัญในกรณีนี้

หากไม่มี Capitalize แม่แบบจะให้ผลเป็น 'onclick' ประเภทภายในนี้จะเปลี่ยนอักขระตัวแรกของลิเทอรัลเป็นตัวพิมพ์ใหญ่ ทำให้ได้ชื่อส่วนจัดการแบบ camelCase ที่เป็นธรรมเนียม

type E = "scroll"
type Cap = Capitalize<E> // "Scroll"
const c: "Scroll" = "Scroll"
console.log(c)

การสร้างแผนผังส่วนจัดการ

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

type Events = "click" | "hover"
type Handlers = {
  [E in Events as "on" extends string ? "on" : never]?: () => void
}
// In practice the key uses a template: on + Capitalize<E>
const h: { onClick?: () => void } = {}
console.log(h)

การจำลองเส้นทาง

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

type Resource = "users" | "posts"
// template: /api/ followed by Resource
// => "/api/users" | "/api/posts"
const path: "/api/users" | "/api/posts" = "/api/users"
console.log(path)

เส้นทางที่มีพารามิเตอร์

เพิ่มตัวแทนตำแหน่งสำหรับรหัสประจำตัวแบบ dynamic แม่แบบที่มีเครื่องหมายทับ ทรัพยากร เครื่องหมายทับ และส่วนรหัสประจำตัวแบบเจเนอริก สามารถจำลองเส้นทางของผู้ใช้ที่ตามด้วยรหัสประจำตัวเชิงตัวเลขได้

type Id = number
// template: /users/ followed by Id-like segment
function userPath(id: number): string {
  return "/users/" + id
}
console.log(userPath(42)) // /users/42

การบังคับใช้รูปแบบขณะคอมไพล์

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

type Method = "GET" | "POST"
function call(endpoint: "GET /users" | "POST /users") {
  return endpoint
}
console.log(call("GET /users"))
// call("DELETE /users") // Error
console.log("ok")

การประกอบชื่อตัวแปร CSS

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

type Token = "primary" | "accent"
// template: --color- followed by Token
// => "--color-primary" | "--color-accent"
const v: "--color-primary" | "--color-accent" = "--color-accent"
console.log(v)

การแยกด้วยการอนุมาน

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

type ExtractMethod<S> = S extends "GET /users" ? "GET" : "OTHER"
type M = ExtractMethod<"GET /users"> // "GET"
const m: "GET" = "GET"
console.log(m)

ประโยชน์ในโลกจริง

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

type Tab = "home" | "profile"
// template: tab- followed by Tab => "tab-home" | "tab-profile"
function selectTab(id: "tab-home" | "tab-profile") { return id }
console.log(selectTab("tab-home"))

ทำให้ยังอ่านง่าย

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

type Entity = "user" | "order"
// type EventName = on + Capitalize<Entity> + Created
// e.g. "onUserCreated" | "onOrderCreated"
const e: "onUserCreated" | "onOrderCreated" = "onUserCreated"
console.log(e)

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

ทดสอบความเข้าใจเกี่ยวกับการจำลองสตริงที่มีโครงสร้าง

ทบทวน

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

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

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