สรุป 5 Utility Types ที่ใช้บ่อยใน TypeScript

สำหรับมือใหม่ที่เริ่มเขียน TypeScript มาสักพักนึงอยากให้ลองศึกษา Utility Types ของ TypeScript เพิ่มเติมกันด้วยนะครับ ​:)

.

1. Partial<Type>

ทำให้ทุก property ทั้งหมดใน type เป็น optional

ตัวอย่าง:

interface Customer {

id: string

name: string

}

type PartialCustomer = Partial<Customer>

// ผลลัพธ์: { id?: string; name?: string }

อาจใช้ในกรณี request ตอนอัปเดตข้อมูลก็ได้ เช่น UpdateCustomerRequest เป็นต้น

.

2. Record<Keys, Type>

ช่วยสร้างชนิดข้อมูล object ที่ key ของ property เป็น Keys และ value ของ property เป็น Type ได้

ตัวอย่าง:

type Staff = “John” | “Bob”

const canPlayFootball: Record<Staff, boolean> = {

John: true,

Bob: false,

}

และยังใช้ร่วมกับ Partial<Record<…>> เมื่อไม่ต้องการ map ทุก key แต่ยังอยากได้ type safety

.

3. Omit<Type, Keys>

ลบ property บางตัว ออกจาก type ที่ต้องการ

ตัวอย่าง:

interface Product {

name: string

price: number

}

type ProductWithName = Omit<Product, “price”>

// ผลลัพธ์: { name: string }

.

4. ReturnType<Type>

ดึงชนิดข้อมูล (type) ของฟังก์ชันแบบ return ค่า

ตัวอย่าง:

function multiply(a: number, b: number): number {

return a * b

}

type Multiply(Return = ReturnType<typeof multiply>

// ผลลัพธ์: number

.

5. Readonly<Type>

ทำให้ property ทั้งหมดไม่สามารถถูกแก้ไขได้ (readonly)

ตัวอย่าง:

function resetScore(score: Readonly<Score>) {

score.count = 0 // จะ Error ตรงนี้

}

ใช้สำหรับให้รู้ว่าค่าจะต้องไม่ถูกเปลี่ยน ช่วยให้อ่านง่าย และป้องกันการแก้ไขโดยไม่ได้ตั้งใจ

.

สรุป การใช้ utility types จะช่วยให้โค้ดมีความยืดหยุ่น ปลอดภัย และลดความซับซ้อนได้ดีมาก

และโดยปกติ utility types จะทำงานแค่ระดับเดียว หากทุกคนต้องการรองรับแบบหลายระดับ (deep support) แนะนำ library ชื่อว่า ts-toolbelt https://github.com/millsp/ts-toolbelt นะครับ

โค้ชเอก

Coding Mentor

ใส่ความเห็น

อีเมลของคุณจะไม่แสดงให้คนอื่นเห็น ช่องข้อมูลจำเป็นถูกทำเครื่องหมาย *

This site uses Akismet to reduce spam. Learn how your comment data is processed.