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

ชนิดข้อมูลอรรถประโยชน์: 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 name

Required<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 client

Omit<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 yet

Readonly<T>

ทำให้คุณสมบัติทั้งหมดเป็นแบบอ่านอย่างเดียว และป้องกันการกำหนดค่าใหม่ เหมาะสำหรับออบเจ็กต์การตั้งค่าและข้อมูลที่เปลี่ยนแปลงไม่ได้

const config: Readonly<Config> = {
  host: 'localhost',
  port: 3000,
};
config.port = 8080; // Error: cannot assign to 'port' because it is read-only

Record<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 ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

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

  1. Generics: T, extends และข้อจำกัด
  2. ชนิดข้อมูลอรรถประโยชน์: Partial, Required, Pick และ Omit
  3. ชนิดข้อมูลแบบแมปและชนิดข้อมูลแบบมีเงื่อนไข
  4. การทำให้ชนิดข้อมูลแคบลง: typeof, instanceof และยูเนียนแบบจำแนก
← กลับไปที่ Frontend Academy