ชนิดข้อมูลจัดการสตริงในตัว
ใช้ Uppercase, Lowercase, Capitalize และ Uncapitalize
ชนิดข้อมูลจัดการสตริงในตัว เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
ตัวแปลงสตริงในตัว
TypeScript มาพร้อมชนิดจัดการสตริงในตัว 4 ชนิด ได้แก่ ในตัว: Uppercase, Lowercase, Capitalize และ Uncapitalize ชนิดเหล่านี้แปลงชนิดสตริงลิเทอรัลในเวลาคอมไพล์ โดยไม่มีค่าใช้จ่ายขณะทำงาน
แปลงเป็นตัวพิมพ์ใหญ่
Uppercase<S> เปลี่ยนอักขระทุกตัวของชนิดสตริงลิเทอรัลให้เป็นตัวพิมพ์ใหญ่ ลิเทอรัล 'hello' จะกลายเป็นชนิด 'HELLO'
type Loud = Uppercase<"hello"> // "HELLO"
const x: Loud = "HELLO"
console.log(x)แปลงเป็นตัวพิมพ์เล็ก
Lowercase<S> ทำสิ่งตรงกันข้าม โดยเปลี่ยนอักขระทุกตัวให้เป็นตัวพิมพ์เล็ก 'HELLO' จะกลายเป็น 'hello'
type Quiet = Lowercase<"HELLO"> // "hello"
const x: Quiet = "hello"
console.log(x)เปลี่ยนอักษรตัวแรกเป็นตัวพิมพ์ใหญ่
Capitalize<S> เปลี่ยนเฉพาะอักขระตัวแรกให้เป็นตัวพิมพ์ใหญ่ โดยไม่เปลี่ยนส่วนที่เหลือ 'name' จะกลายเป็น 'Name'
type Title = Capitalize<"name"> // "Name"
const x: Title = "Name"
console.log(x)เปลี่ยนอักษรตัวแรกเป็นตัวพิมพ์เล็ก
Uncapitalize<S> เปลี่ยนเฉพาะอักขระตัวแรกให้เป็นตัวพิมพ์เล็ก 'Name' จะกลายเป็น 'name' ซึ่งมีประโยชน์สำหรับแปลงคีย์แบบ PascalCase เป็น camelCase
type Camel = Uncapitalize<"Name"> // "name"
const x: Camel = "name"
console.log(x)การแปลงยูเนียน
เมื่อนำชนิดในตัวไปใช้กับยูเนียน ชนิดนั้นจะแปลงสมาชิกแต่ละตัวด้วย Uppercase ของ 'a' | 'b' จะให้ผลเป็น 'A' | 'B'
type Keys = "id" | "name"
type Upper = Uppercase<Keys> // "ID" | "NAME"
const k: Upper = "ID"
console.log(k)การใช้ร่วมกับลิเทอรัลเทมเพลต
ชนิดในตัวมีประสิทธิภาพมากที่สุดเมื่อใช้ภายในชนิดลิเทอรัลเทมเพลต เทมเพลตที่เติม get ไว้หน้า Capitalize ของฟิลด์จะสร้างชื่อฟังก์ชันอ่านค่า เช่น ชื่อฟังก์ชันอ่านค่าของฟิลด์ name
type Field = "name" | "age"
// template: get + Capitalize<Field> => "getName" | "getAge"
const g: "getName" | "getAge" = "getName"
console.log(g)การสร้างชื่อคีย์ในชนิดแมป
ภายในการแมปชื่อคีย์ของชนิดแมป ชนิดในตัวสามารถสร้างชื่อพร็อพเพอร์ตีที่แปลงแล้วได้ เช่น เปลี่ยนพร็อพเพอร์ตีแต่ละรายการให้เป็นคีย์ตัวจัดการที่ขึ้นต้นด้วยตัวพิมพ์ใหญ่
type Events = "click" | "drag"
// { [E in Events as on + Capitalize<E>]: () => void }
// produces keys onClick and onDrag
const handlers: { onClick: () => void } = { onClick: () => {} }
console.log(typeof handlers.onClick)การเชื่อมชนิดในตัว
คุณสามารถซ้อนชนิดในตัวเพื่อประกอบการแปลงได้ เช่น การใช้ Capitalize กับสตริงที่ผ่าน Lowercase เพื่อปรับรูปแบบตัวพิมพ์ให้เป็นมาตรฐาน
type Normalized = Capitalize<Lowercase<"hELLO">> // "Hello"
const x: Normalized = "Hello"
console.log(x)มีผลเฉพาะเวลาคอมไพล์
ชนิดเหล่านี้ไม่มีอยู่ขณะทำงาน หากต้องการแปลงค่าสตริงจริง คุณยังคงต้องเรียกใช้เมธอด เช่น toUpperCase() ส่วนชนิดในตัวมีหน้าที่กำหนดรูปร่างของชนิดแบบสแตติกเท่านั้น
function shout<S extends string>(s: S): Uppercase<S> {
return s.toUpperCase() as Uppercase<S>
}
console.log(shout("hi")) // HI, typed as "HI"
การใช้งานจริง
ใช้ชนิดในตัวเพื่อสร้างชื่อค่าคงที่ คีย์เหตุการณ์ ชื่อฟังก์ชันอ่านค่าและตั้งค่า รวมถึงปรับรูปแบบตัวพิมพ์ของคีย์การตั้งค่าที่เป็นชนิดลิเทอรัลให้เป็นมาตรฐาน โดยทั้งหมดจะได้รับการตรวจสอบจากคอมไพเลอร์
type Action = "add" | "remove"
type ActionType = Uppercase<Action> // "ADD" | "REMOVE"
const a: ActionType = "ADD"
console.log(a)ตรวจสอบความเข้าใจอย่างรวดเร็ว
ตรวจสอบความเข้าใจของคุณเกี่ยวกับชนิดสตริงในตัว
สรุปทบทวน
ชนิดในตัว Uppercase, Lowercase, Capitalize และ Uncapitalize จะแปลงชนิดสตริงลิเทอรัลในเวลาคอมไพล์ โดยกระจายการแปลงไปยังสมาชิกของยูเนียน และสามารถประกอบร่วมกับชนิดลิเทอรัลเทมเพลตและชนิดแมปเพื่อสร้างชื่อคีย์และตัวจัดการได้ ชนิดเหล่านี้ไม่มีพฤติกรรมขณะทำงาน ดังนั้นให้ใช้เมธอดสตริงจริงสำหรับการแปลงขณะทำงาน ส่วนชนิดในตัวมีหน้าที่กำหนดรูปร่างของชนิดแบบสแตติก
คำถามที่พบบ่อย
บทเรียน “ชนิดข้อมูลจัดการสตริงในตัว” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ชนิดข้อมูลจัดการสตริงในตัว” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ชนิดข้อมูลจัดการสตริงในตัว”
ใช้ Uppercase, Lowercase, Capitalize และ Uncapitalize คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน
บทเรียน “ชนิดข้อมูลจัดการสตริงในตัว” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- พื้นฐานชนิดข้อมูลสตริงแบบแม่แบบ
- การจำลองสตริงที่มีโครงสร้าง
- ยูเนียนสตริงและการเติมข้อความอัตโนมัติ
- ชนิดข้อมูลจัดการสตริงในตัว