การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ
แมปคีย์ใหม่ด้วย “as” สร้างคีย์ด้วยลิเทอรัลแม่แบบ (Capitalize/Uncapitalize) และกรองคุณสมบัติตามรูปแบบชื่อ
การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ เป็นบทเรียน TypeScript Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน TypeScript Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
บทนำ
เป้าหมาย: ใช้การแมปคีย์ใหม่ (ส่วนคำสั่ง as) ร่วมกับชนิดข้อมูลลิเทอรัลแบบแม่แบบ เพื่อเปลี่ยนชื่อ สร้าง หรือลบพร็อพเพอร์ตีตามรูปแบบชื่อ
- เปลี่ยนชื่อคีย์:
K as NewK - กรองคีย์ด้วย
never - ประกอบชื่อ:
`get${Capitalize<K>}`
เปลี่ยนชื่อคีย์
เปลี่ยนชื่อคีย์ด้วยการแมปใหม่ ตัวอย่างเช่น แปลงชื่อแบบขีดล่างให้เป็น camelCasee
type Original = { first_name: string; last_name: string }
type Camelize<T> = {
[K in keyof T as K extends `${infer A}_${infer B}`
? `${A}${Capitalize<B>}`
: K]: T[K]
}
type UserCamel = Camelize<Original> // { firstName: string; lastName: string }กรองตามคำนำหน้า
คีย์ที่มีชนิดข้อมูล never จะถูกตัดออก แม่แบบสำหรับกรองตัวจัดการเหตุการณ์คือ `on${string}`
type Props = { onClick: () => void; onSubmit: () => void; title: string }
type WithoutHandlers<T> = {
[K in keyof T as K extends `on${string}` ? never : K]: T[K]
}
type Clean = WithoutHandlers<Props> // { title: string }สร้างเมธอด
สร้างส่วนติดต่อ APIs ด้วยชื่อจากแม่แบบ โดยใช้รูปแบบ get${Capitalize<K>} เพื่อสร้างเมธอดดึงค่าจากฟิลด์
type Fields = "name" | "email"
type Getters<T extends string> = {
[K in T as `get${Capitalize<K>}`]: () => string
}
type ClientAPI = Getters<Fields>
// { getName: () => string; getEmail: () => string }ประกอบรูปแบบ
ผสานแม่แบบหลายแบบเพื่อสร้างชื่อที่สื่อความหมายชัดเจน และทำให้การตั้งชื่อสอดคล้องกันในโครงการขนาดใหญ่
type Route = `/${"" | `${string}`}`
type HttpMethod = "get" | "post"
type Endpoints<T extends string, M extends string> = {
[K in T as `${M}_${K}`]: { path: `/${K}`; method: Uppercase<M> }
}
type API = Endpoints<"users" | "login", HttpMethod>
// { get_users: { path: "/users"; method: "GET" }, post_login: { path: "/login"; method: "POST" } }เคล็ดลับและข้อควรระวัง
เคล็ดลับ:
การแมปชื่อใหม่มีต้นทุนสูง ควรแบ่งชนิดข้อมูลที่ซับซ้อนด้วยนามแฝง
ใช้แม่แบบอย่างง่ายสำหรับการกรอง: `on${string}`, `data-${string}`
ใช้ตัวช่วยสำหรับการขึ้นต้นด้วยตัวพิมพ์ใหญ่ การยกเลิกการขึ้นต้นด้วยตัวพิมพ์ใหญ่ การแปลงเป็นตัวพิมพ์ใหญ่ และการแปลงเป็นตัวพิมพ์เล็ก
ทำให้ส่วนติดต่อ APIs เรียบง่าย หากการสร้างชื่อมีมากเกินไป
ตรวจสอบการกรองคำนำหน้า
ตรวจสอบอย่างรวดเร็ว: รูปแบบของชนิดข้อมูลแบบแมปใดใช้ลบพร็อพเพอร์ตีที่ขึ้นต้นด้วย on
ทบทวน
ทบทวน: เปลี่ยนชื่อหรือกรองคีย์ด้วยการแมปคีย์ใหม่ สร้างคีย์ด้วยชนิดข้อมูลลิเทอรัลแบบแม่แบบ และลบคีย์ที่ไม่ต้องการด้วยชนิดข้อมูลที่ไม่มีทางเกิดขึ้น
คำถามที่พบบ่อย
บทเรียน “การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส TypeScript Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส TypeScript Academy มีบทเรียนทั้งหมด 3 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ”
แมปคีย์ใหม่ด้วย “as” สร้างคีย์ด้วยลิเทอรัลแม่แบบ (Capitalize/Uncapitalize) และกรองคุณสมบัติตามรูปแบบชื่อ คุณปฏิบัติ TypeScript Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน TypeScript Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน TypeScript Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 3 บทเรียน
บทเรียน “การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน TypeScript Academy นี้ได้ไหม
ได้ บทเรียน TypeScript Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- ชนิดข้อมูลแมปด้วย +/-readonly และ +/-?
- การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ
- การกำหนดชนิดข้อมูลตามรูปแบบสตริง (พารามิเตอร์เส้นทาง ชื่อเหตุการณ์)