ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit
แปลงชนิดข้อมูลที่มีอยู่ด้วยชนิดข้อมูลอรรถประโยชน์ในตัว เพื่อสร้างรูปแบบต่าง ๆ โดยไม่ต้องเขียนซ้ำ
ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit เป็นบทเรียน Frontend Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Frontend Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
ชนิดยูทิลิตีในตัว
TypeScript มาพร้อมชุดชนิดยูทิลิตีแบบทั่วไปที่ใช้แปลงชนิดข้อมูลอื่น ชนิดเหล่านี้ช่วยไม่ให้ต้องเขียนรูปแบบอินเทอร์เฟซที่คล้ายกันซ้ำด้วยตนเอง
Partial<T>
ทำให้คุณสมบัติทั้งหมดของ T เป็นตัวเลือก เหมาะอย่างยิ่งสำหรับข้อมูลที่ส่งเพื่อการอัปเดตหรือแพตช์ ซึ่งไม่จำเป็นต้องระบุทุกฟิลด์
interface User { name: string; email: string; age: number; }
function updateUser(id: string, changes: Partial<User>) {
// changes.name is string | undefined
// changes.email is string | undefined
}
updateUser('1', { name: 'Bob' }); // only update nameRequired<T>
ตรงข้ามกับ Partial โดยทำให้คุณสมบัติทั้งหมดจำเป็น และลบตัวปรับแต่งตัวเลือก (?) ออก
interface Config {
host?: string;
port?: number;
debug?: boolean;
}
function validate(config: Required<Config>) {
// All three are now required
console.log(config.host, config.port, config.debug);
}Pick<T, K>
สร้างชนิดข้อมูลที่มีเฉพาะคุณสมบัติที่ระบุจาก T เหมาะสำหรับตัดออบเจ็กต์ขนาดใหญ่ให้เหลือเฉพาะฟิลด์ที่คุณต้องการ
interface User { id: number; name: string; email: string; password: string; }
type PublicUser = Pick<User, 'id' | 'name' | 'email'>;
// { id: number; name: string; email: string }
// password is excluded — safe to send to clientOmit<T, K>
สร้างชนิดข้อมูลโดยลบคุณสมบัติที่ระบุออก เป็นการทำงานตรงข้ามกับ Pick
type UserWithoutPassword = Omit<User, 'password'>;
// { id: number; name: string; email: string }
type CreateUserDto = Omit<User, 'id'>; // new users don't have an id yetReadonly<T>
ทำให้คุณสมบัติทั้งหมดเป็นแบบอ่านอย่างเดียว และป้องกันการกำหนดค่าใหม่ เหมาะสำหรับออบเจ็กต์การตั้งค่าและข้อมูลที่เปลี่ยนแปลงไม่ได้
const config: Readonly<Config> = {
host: 'localhost',
port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-onlyRecord<K, V>
สร้างชนิดออบเจ็กต์ที่มีคีย์เป็นชนิด K และค่ามีชนิด V สะอาดกว่าการใช้ลายเซ็นดัชนีดิบเมื่อคีย์เป็นยูเนียนที่ทราบอยู่แล้ว
type Role = 'admin' | 'editor' | 'viewer';
type Permissions = Record<Role, { canEdit: boolean; canDelete: boolean }>;
const perms: Permissions = {
admin: { canEdit: true, canDelete: true },
editor: { canEdit: true, canDelete: false },
viewer: { canEdit: false, canDelete: false },
};ReturnType<T> และ Parameters<T>
ดึงชนิดข้อมูลผลลัพธ์และชนิดข้อมูลพารามิเตอร์ของชนิดฟังก์ชันออกมา มีประโยชน์เมื่อคุณไม่สามารถนำเข้าชนิดข้อมูลได้ แต่ต้องการให้ตรงกับลายเซ็นของฟังก์ชัน
function fetchUser(id: number) {
return { id, name: 'Alice' };
}
type UserResult = ReturnType<typeof fetchUser>; // { id: number; name: string }
type FetchParams = Parameters<typeof fetchUser>; // [id: number]Awaited<T>
แกะชนิด Promise เพื่อให้ได้ชนิดข้อมูลค่าที่ส่งกลับเมื่อเสร็จสมบูรณ์ มีประโยชน์เมื่อทำงานกับฟังก์ชันแบบไม่พร้อมกัน
type UserResponse = Awaited<ReturnType<typeof fetchUser>>;
// Resolves both the function return and the Promise
async function load() { return { user: { name: 'Alice' } }; }
type Loaded = Awaited<ReturnType<typeof load>>; // { user: { name: string } }Extract<T, U> และ Exclude<T, U>
Extract<T, U> จะเก็บเฉพาะชนิดข้อมูลใน T ที่สามารถกำหนดให้กับ U ได้ ส่วน Exclude<T, U> จะลบชนิดข้อมูลเหล่านั้นออก
type A = 'a' | 'b' | 'c' | 'd';
type BC = Extract<A, 'b' | 'c' | 'e'>; // 'b' | 'c'
type AD = Exclude<A, 'b' | 'c'>; // 'a' | 'd'
// NonNullable removes null and undefined:
type T = string | null | undefined;
type NonNull = NonNullable<T>; // stringการประกอบชนิดยูทิลิตี
สามารถประกอบชนิดยูทิลิตีเข้าด้วยกันเพื่อสร้างชนิดข้อมูลที่แม่นยำได้
type UpdatePayload<T> = Partial<Omit<T, 'id' | 'createdAt'>>;
// Use for PATCH endpoints — omit immutable fields, make rest optional
function patch(id: string, data: UpdatePayload<User>) {
// data can have any subset of mutable user fields
}ตรวจสอบความเข้าใจ
ชนิดยูทิลิตีใดใช้ลบคีย์ที่ระบุออกจากอินเทอร์เฟซ?
สรุป: ชนิดยูทิลิตี
Partial ทำให้ทุกฟิลด์เป็นตัวเลือก Required ลบตัวปรับแต่งตัวเลือกออก Pick เก็บคีย์ที่เลือกไว้ Omit ลบคีย์ที่เลือก Readonly ป้องกันการเปลี่ยนแปลง Record จับคู่คีย์ยูเนียนกับชนิดข้อมูลค่า ReturnType และ Parameters ดึงชนิดข้อมูลของฟังก์ชันออกมา ประกอบยูทิลิตีเพื่อสร้างชนิด DTO ที่แม่นยำ
คำถามที่พบบ่อย
บทเรียน “ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Frontend Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Frontend Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit”
แปลงชนิดข้อมูลที่มีอยู่ด้วยชนิดข้อมูลอรรถประโยชน์ในตัว เพื่อสร้างรูปแบบต่าง ๆ โดยไม่ต้องเขียนซ้ำ คุณปฏิบัติ Frontend Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Frontend Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Frontend Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Frontend Academy นี้ได้ไหม
ได้ บทเรียน Frontend Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- Generics: T, extends และข้อจำกัด
- ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit
- ชนิดข้อมูลแบบแมปและชนิดข้อมูลแบบมีเงื่อนไข
- การทำให้ชนิดข้อมูลแคบลง: typeof, instanceof และยูเนียนแบบจำแนก