• صفحه اصلی
  • مهارت‌ها
  • پروژه‌ها
  • بلاگ
  • مشاوره
  • تماس با من
مشاورهرزومه
Naser Rasouli

نویسنده

Naser Rasouli

توسعه‌دهنده فرانت‌اند؛ اینجا تجربه‌ها و یادداشت‌های واقعی‌ام از پروژه‌ها را می‌نویسم.

GitHubLinkedIn

آخرین نوشته‌ها

متدولوژی BEM در CSS: نام‌گذاری استاندارد برای کدهای تمیز
2026-02-18•1 دقیقه مطالعه

متدولوژی BEM در CSS: نام‌گذاری استاندارد برای کدهای تمیز

راهنمای عملی BEM برای جلوگیری از تداخل استایل، ساختاردهی کلاس‌ها و نگهداری ساده‌تر CSS.

بررسی نحوه به‌روزرسانی state در React
2026-02-11•1 دقیقه مطالعه

بررسی نحوه به‌روزرسانی state در React

setState بلافاصله state را عوض نمی‌کند؛ همین باعث می‌شود console.log مقدار قبلی را لاگ کند. این راهنما توضیح می‌دهد چرا و چطور مقدار جدید را درست دریافت کنیم.

تابع Cleanup در useEffect: از باگ‌های پنهان تا الگوهای درست
2026-02-04•1 دقیقه مطالعه

تابع Cleanup در useEffect: از باگ‌های پنهان تا الگوهای درست

راهنمای عملی نوشتن cleanup در useEffect تا از memory leak، لیسنرهای تکراری و setState روی کامپوننت unmounted جلوگیری کنید.

تسلط بر Record در تایپ‌اسکریپت

تسلط بر Record در تایپ‌اسکریپت

2025-12-13
typescriptrecordenumstype-safety

مقدمه

برای وصل‌کردن لیبل، آیکن یا رنگ به یک enum بدون پخش شدن switch در کل پروژه، Record بهترین دوست شماست. یک مپ تایپ‌سیف می‌سازد که متادیتای UI را در یک جای مرکزی و قابل‌گسترش نگه می‌دارد. این راهنما کاربرد آن را هم با union و هم با enumهای واقعی نشان می‌دهد.


Record در تایپ‌اسکریپت چیست؟

Record<K, T> یک نوع آبجکت می‌سازد که کلیدها حتماً از نوع K هستند و مقادیر حتماً از نوع T. برای مپ‌کردن یک مجموعه کلید ثابت به متادیتای ساخت‌یافته عالی است.

// یونین نقش‌های ممکن
type UserRole = "admin" | "user" | "guest";

// کلیدها باید همین نقش‌ها باشند؛ مقادیر همگی string
const roles: Record<UserRole, string> = {
  admin: "Administrator",
  user: "Regular User",
  guest: "Guest User",
};

// دسترسی ایمن
console.log(roles.admin); // "Administrator"

// خطا: کلید ناشناخته مجاز نیست
// roles.superAdmin = "Super Admin";

به این شکل تمام کلیدها پوشش داده می‌شوند و امکان اضافه‌شدن کلید اضافی وجود ندارد.


استفاده از Record با enum (متادیتای UI)

در پروژه‌های واقعی همیشه enum داریم. فرض کنید برای وضعیت پرداخت به لیبل و رنگ نیاز دارید:

enum PaymentStatus {
  Unpaid = 0,
  Paid = 1,
  Failed = 2,
}

به جای چندین switch، یک منبع واحد بسازید:

const paymentStatusMeta: Record<
  PaymentStatus,
  { label: string; color: string }
> = {
  [PaymentStatus.Unpaid]: { label: "Unpaid", color: "orange" },
  [PaymentStatus.Paid]: { label: "Paid", color: "green" },
  [PaymentStatus.Failed]: { label: "Failed", color: "red" },
};

حالا مستقیم متادیتا را می‌خوانید:

const status = PaymentStatus.Paid;
console.log(paymentStatusMeta[status].label); // "Paid"
console.log(paymentStatusMeta[status].color); // "green"

تابع کمکی برای تمیزی بیشتر

Lookup را بپیچید تا هم خواناتر شود و هم بعداً قابل توسعه:

function getPaymentStatusMeta(status: PaymentStatus) {
  return paymentStatusMeta[status];
}

// استفاده
const info = getPaymentStatusMeta(PaymentStatus.Failed);
console.log(info.label); // "Failed"
console.log(info.color); // "red"

اگر بعداً خواستید بومی‌سازی یا فرمت اضافه کنید، فقط همین تابع را تغییر می‌دهید.


چرا Record را به switch/case ترجیح دهیم؟

  • پوشش کامل: تایپ‌اسکریپت مجبور می‌کند تمام کلیدهای enum یا union را بنویسید.
  • تایپ ایمن: مقادیر باید با شکل تعریف‌شده منطبق باشند.
  • متادیتای متمرکز: لیبل، رنگ و آیکن در یک مکان نگه داشته می‌شوند.
  • خوانایی بهتر: meta[status].label از چند switch پشت سر هم خواناتر است.
  • توسعه بدون ریسک: با اضافه‌شدن مقدار جدید enum، کامپایلر اجبار می‌کند متادیتایش را هم بدهید.

خلاصه

  • Record<K, T> یک مپ تایپ‌سیف از کلیدهای مشخص به مقادیر ساخت‌یافته می‌سازد.
  • برای متادیتای UI روی enum و union از آن استفاده کنید تا switchها پخش نشوند.
  • Lookup را در یک تابع کمکی بپیچید تا افزودن ترجمه یا فرمت در آینده بدون ریفکتور انجام شود.
  • کامپایلر پوشش کامل و شکل درست مقادیر را تضمین می‌کند و باگ‌های زمان اجرا را کم می‌کند.

جمع‌بندی

Record متادیتای enum را یک‌جا، خوانا و تایپ‌سیف نگه می‌دهد. آن را به‌عنوان منبع واحد هر چیزی که UI برای نمایش یک وضعیت یا نقش لازم دارد استفاده کنید و بگذارید تایپ‌اسکریپت کامل بودنش را ضمانت کند. کدنویسی‌تان پرانرژی!