Utility Types ใน TypeScript

Utility Types

TypeScript มี built-in utility types ที่ช่วย transform type ที่มีอยู่เป็น type ใหม่ ลดการเขียนซ้ำ

Base Type สำหรับตัวอย่าง

interface User {
  id: number;
  name: string;
  email: string;
  role: "admin" | "user";
  createdAt: Date;
}

Partial และ Required

// Partial<T> — ทำให้ทุก property เป็น optional
type UpdateUserData = Partial<User>;
// เท่ากับ { id?: number; name?: string; email?: string; ... }

function updateUser(id: number, data: Partial<User>): void {
  // ส่งแค่ field ที่ต้องการ update ได้
}
updateUser(1, { name: "ชื่อใหม่" });  // OK

// Required<T> — ทำให้ทุก property เป็น required
interface Config {
  theme?: string;
  language?: string;
}
type FullConfig = Required<Config>;
// ทุก field ต้องมี — ไม่มี optional แล้ว

// JS ไม่มี utility types — ต้อง validate เอง
function updateUser(id, data) {
  // ไม่มีการตรวจสอบว่า data มี fields ถูกต้องหรือไม่
}

from typing import Optional, TypedDict
class UpdateUserData(TypedDict, total=False):
    name: str
    email: str

-- SQL ใช้ NULL/NOT NULL ควบคุม
ALTER TABLE users ALTER COLUMN name SET NOT NULL;

Pick และ Omit

// Pick<T, Keys> — เลือกเฉพาะ fields ที่ต้องการ
type UserPreview = Pick<User, "id" | "name">;
// { id: number; name: string; }

// Omit<T, Keys> — ตัด fields ที่ไม่ต้องการออก
type CreateUserInput = Omit<User, "id" | "createdAt">;
// { name: string; email: string; role: "admin" | "user"; }

Record

// Record<Keys, Type> — สร้าง object type จาก keys และ value type
type Role = "admin" | "editor" | "viewer";

type RolePermissions = Record<Role, string[]>;

const permissions: RolePermissions = {
  admin: ["read", "write", "delete"],
  editor: ["read", "write"],
  viewer: ["read"]
};

// Record กับ dynamic keys
type UserMap = Record<string, User>;

Readonly

// Readonly<T> — ทำให้ทุก property เป็น readonly
type ImmutableUser = Readonly<User>;

const frozenUser: ImmutableUser = {
  id: 1, name: "สมชาย", email: "s@test.com",
  role: "admin", createdAt: new Date()
};
// frozenUser.name = "ชื่อใหม่";  // Error! readonly

ReturnType และ Parameters

// ReturnType<T> — ดึง return type ของ function
function fetchUsers(): Promise<User[]> {
  return fetch("/api/users").then(r => r.json());
}
type FetchUsersResult = ReturnType<typeof fetchUsers>;
// Promise<User[]>

// Parameters<T> — ดึง parameter types เป็น tuple
function createUser(name: string, email: string, role: "admin" | "user"): User {
  return { id: 1, name, email, role, createdAt: new Date() };
}
type CreateUserParams = Parameters<typeof createUser>;
// [string, string, "admin" | "user"]

รวม Utility Types เข้าด้วยกัน

// สร้าง type ที่ซับซ้อนจากการ combine utilities
type UserFormData = Omit<Partial<User>, "id" | "createdAt"> & {
  password: string;
  confirmPassword: string;
};

// API Response ที่ paginated
interface PaginatedResponse<T> {
  data: T[];
  total: number;
  page: number;
  perPage: number;
}

type UserListResponse = PaginatedResponse<Pick<User, "id" | "name" | "role">>;