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

ชนิดแมป: การแปลงชนิดออบเจ็กต์

วนผ่านคีย์เพื่อสร้างโครงสร้างชนิดใหม่

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

ยินดีต้อนรับ

ประเภทแมปจะวนซ้ำผ่านคีย์ของประเภทเพื่อสร้างประเภทใหม่ที่มีคุณสมบัติที่แปลงแล้ว เป็นพื้นฐานของ Partial, Readonly, Record และเครื่องมืออื่น ๆ อีกมากมาย

ไวยากรณ์พื้นฐานของประเภทแมป

ใช้ `[K in keyof T]` เพื่อวนซ้ำผ่านคีย์ทั้งหมดของ T และสร้างประเภทใหม่
type Copy<T> = { [K in keyof T]: T[K] };
type UserCopy = Copy<User>; // same as User

ทำให้คุณสมบัติทั้งหมดเป็นตัวเลือก

นี่คือวิธีที่ `Partial` ถูกนำไปใช้งาน — เพิ่ม ? ให้กับคุณสมบัติแต่ละรายการ
type Partial<T> = { [K in keyof T]?: T[K] };
type PartialUser = Partial<User>;

ทำให้คุณสมบัติทั้งหมดอ่านได้อย่างเดียว

เพิ่ม `readonly` ให้กับคุณสมบัติแต่ละรายการในประเภทแมป
type Readonly<T> = { readonly [K in keyof T]: T[K] };
type FrozenUser = Readonly<User>;

การแปลงประเภทค่า

เปลี่ยนประเภทค่าของคุณสมบัติแต่ละรายการโดยคงคีย์ไว้
type Stringify<T> = { [K in keyof T]: string };
type StringUser = Stringify<User>; // all values are string

การกรองคุณสมบัติด้วย never

ใช้เงื่อนไขในตำแหน่งค่า แล้วกรองด้วย never ผ่านการแมปคีย์ใหม่
type OnlyStrings<T> = {
  [K in keyof T as T[K] extends string ? K : never]: T[K]
};

Record<K, V>

Record สร้างประเภทออบเจ็กต์ที่มีคีย์และประเภทค่าเฉพาะ
type Record<K extends string | number | symbol, V> = { [P in K]: V };
const roles: Record<'admin' | 'user', boolean> = { admin: true, user: false };

ประเภทแมปคงสถานะตัวเลือกไว้

โดยค่าเริ่มต้น ประเภทแมปจะคงตัวปรับแต่ง optional และ readonly จากประเภทต้นฉบับไว้
interface User { id: number; name?: string; }
type Copy<T> = { [K in keyof T]: T[K] };
type C = Copy<User>; // id: number; name?: string (preserved)

การแมปคีย์ใหม่ด้วย as

แมปคีย์ไปเป็นชื่อใหม่โดยใช้ `as` ในประเภทแมป
type Getters<T> = {
  [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K]
};

การวนซ้ำเหนือยูเนียน

แมปเหนือประเภทยูเนียนแทน `keyof T` เพื่อสร้างประเภทออบเจ็กต์จากยูเนียน
type Flags = { [K in 'option1' | 'option2' | 'option3']: boolean };

การรวมประเภทแมปและประเภทแบบมีเงื่อนไข

ประเภทแมปและประเภทแบบมีเงื่อนไขสามารถประกอบกันได้อย่างเป็นธรรมชาติ เพื่อสร้างการแปลงที่ซับซ้อน
type NullableValues<T> = { [K in keyof T]: T[K] | null };

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

`{ [K in keyof T]?: T[K] }` สร้างอะไร

สรุป

ประเภทแมปจะวนซ้ำผ่านคีย์เพื่อสร้างประเภทใหม่ สามารถเพิ่มหรือนำ readonly และ ? ออก แปลงประเภทค่า กรองคีย์ด้วย never และแมปคีย์ใหม่ด้วย as ประเภทเหล่านี้เป็นพื้นฐานของประเภทเครื่องมือในตัวของ TypeScript ทั้งหมด

คำถามที่พบบ่อย

บทเรียน “ชนิดแมป: การแปลงชนิดออบเจ็กต์” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ชนิดแมป: การแปลงชนิดออบเจ็กต์” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ 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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. ชนิดแมป: การแปลงชนิดออบเจ็กต์
  2. ตัวปรับแต่งในชนิดแมป: readonly และ ?
  3. ชนิดลิเทอรัลแม่แบบ: รูปแบบข้อความ
  4. การเปลี่ยนชื่อคีย์ด้วย as ในชนิดแมป
← กลับไปที่ TypeScript Academy