Skip to content

CodingThailand's Blog

by โค้ชเอก

Menu
  • About Me
Menu

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

Posted on 16/04/202516/04/2025 by โค้ชเอก

สำหรับมือใหม่ที่เริ่มเขียน 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 นะครับ

Category: ไม่มีหมวดหมู่

ใส่ความเห็น ยกเลิกการตอบ

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

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

  • .NET
  • Android
  • Angular
  • Angular 2
  • Coding
  • CSS
  • Database
  • Editor
  • Flutter
  • Git
  • HTML5
  • Ionic 2
  • Ionic 4
  • Ionic Framwork
  • JavaScript
  • Laravel
  • Laravel 5
  • Node.js
  • PHP
  • PHP 7
  • Plugins
  • React
  • React Native
  • Template
  • Tools
  • TypeScript
  • UI
  • Uncategorized
  • Vue.js
  • XAMPP
  • Yii
  • คอร์สเรียน
  • แรงบันดาลใจ
  • กุมภาพันธ์ 2026
  • มกราคม 2026
  • ธันวาคม 2025
  • กรกฎาคม 2025
  • เมษายน 2025
  • พฤศจิกายน 2024
  • ตุลาคม 2024
  • เมษายน 2020
  • กุมภาพันธ์ 2020
  • สิงหาคม 2019
  • กันยายน 2018
  • สิงหาคม 2018
  • กุมภาพันธ์ 2018
  • พฤศจิกายน 2017
  • ตุลาคม 2017
  • สิงหาคม 2017
  • กรกฎาคม 2017
  • เมษายน 2017
  • ตุลาคม 2016
  • สิงหาคม 2016
  • พฤษภาคม 2016

.NET android Angular Angular 2 Atom Coding Coding Standard CSS CSS 3 Datepicker extensions Git HTML HTML5 Ionic2 JavaScript Laravel5 laravel 5.5 MariaDB Material Design MySQL Node.js npm PHP PHP7 plugins PouchDB recaptcha Restful sail.js template typescript typscript XAMPP Yii2

© 2026 CodingThailand's Blog | Powered by Minimalist Blog WordPress Theme