0Pricing
TypeScript Academy · บทเรียน

การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ

แมปคีย์ใหม่ด้วย “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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. ชนิดข้อมูลแมปด้วย +/-readonly และ +/-?
  2. การแมปคีย์ใหม่และชนิดข้อมูลลิเทอรัลแม่แบบ
  3. การกำหนดชนิดข้อมูลตามรูปแบบสตริง (พารามิเตอร์เส้นทาง ชื่อเหตุการณ์)
← กลับไปที่ TypeScript Academy