تایپ های پرکاربرد

پکیج @types/react مجموعه بسیار گسترده‌ای از تعاریف نوع (Types) را ارائه می‌دهد. هنگامی که با تعامل React و TypeScript کاملاً مسلط شدید، مطالعه فایل‌های تعاریف اصلی این پکیج بسیار ارزشمند خواهد بود. در این بخش، به بررسی کاربردی‌ترین تایپ‌هایی می‌پردازیم که در توسعه روزمره پروژه‌ها به آن‌ها نیاز دارید.

۱. مدیریت رویدادهای مرورگر (DOM Events)

هنگامی که کدهای مدیریت رویداد (Event Handlers) را به صورت مستقیم و خطی درون تگ‌های JSX می‌نویسید، تایپ‌اسکریپت نوع رویداد را به صورت خودکار تشخیص می‌دهد. اما اگر بخواهید تابع مدیریت رویداد را جدا کرده و به صورت یک تابع مستقل بیرون از JSX بنویسید، باید نوع داده پارامتر ورودی (event) را صراحتاً مشخص کنید.

در مثال زیر، برای یک المان ورودی متنی، از تایپ رسمی React.ChangeEvent استفاده شده که المان هدف آن نیز یک تگ اینپوت استاندارد واکشی شده است:

// App.tsx
import { useState } from 'react';

export default function Form() {
  const [value, setValue] = useState("تغییرم بده");

  // تعیین نوع دقیق رویداد تغییر برای المان input
  function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
    setValue(event.currentTarget.value);
  }

  return (
    <>
      <input value={value} onChange={handleChange} />
      <p>مقدار فعلی: {value}</p>
    </>
  );
}

ترفندهای پیدا کردن تایپ مناسب رویدادها:

• استفاده از قابلیت Hover: ساده‌ترین راه این است که ابتدا تابع خود را به صورت موقت و بدون تایپ به تگ متصل کنید (مثلاً <input onChange={e => ...} />)؛ سپس موس خود را روی عبارت onChange نگه دارید تا ویرایشگر کد تایپ دقیق رویداد مورد نیاز را به شما نشان دهد.

• رویدادهای ناشناخته یا عمومی: اگر با رویدادی کار می‌کنید که در لیست پکیج رسمی تعریف نشده است، می‌توانید از تایپ پایه React.SyntheticEvent استفاده کنید. این تایپ، کلاس والد و ریشه تمام رویدادهای شبیه‌سازی شده در React است.

۲. تعیین نوع فرزندان کامپوننت (Children)

برای توصیف ویژگی children در پروپ‌های یک کامپوننت، دو راهکار اصلی و پرکاربرد با رفتارهای متفاوت وجود دارد:

راهکار اول: React.ReactNode (بسیار رایج و منعطف)

این تایپ شامل یک ساختار Union بزرگ از تمام مقادیر ممکنی است که می‌توان در JSX رندر کرد. این مقادیر شامل تگ‌های HTML، کامپوننت‌های راکت، رشته‌های متنی، اعداد، آرایه‌ها و حتی مقادیر null یا undefined می‌شود.

interface ModalProps {
  title: string;
  children: React.ReactNode; // پذیرش هر نوع محتوای مجاز در راکت
}

راهکار دوم: React.ReactElement (محدود و سخت‌گیرانه)

این تایپ بسیار محدودتر است و فقط و فقط شامل تگ‌های معتبر JSX یا کامپوننت‌ها می‌شود. این ساختار داده‌های اولیه جاوااسکریپت مانند متون ساده (Strings) یا اعداد را به عنوان فرزند قبول نمی‌کند.

interface StrictContainerProps {
  title: string;
  children: React.ReactElement; // فقط تگ یا کامپوننت قبول می‌کند، نه متن خالی!
}

یک محدودیت مهم در سیستم تایپ: شما نمی‌توانید از تایپ‌اسکریپت بخواهید که فقط یک المان HTML خاص را به عنوان فرزند بپذیرد. برای مثال، امکان تعریف ساختاری که در سطح کامپایلر اصرار کند کامپوننت شما فقط و فقط تگ‌های <li> را به عنوان فرزند قبول کند، وجود ندارد.

۳. ویژگی‌های استایل‌دهی خطی (Style Props)

هنگامی که می‌خواهید استایل‌های خطی (Inline Styles) را از طریق پروپ‌ها به یک کامپوننت پاس دهید یا کدهای سی‌اس‌اس را در قالب یک شیء جاوااسکریپتی مدیریت کنید، باید از تایپ رسمی React.CSSProperties استفاده کنید.

interface BoxComponentProps {
  title: string;
  style: React.CSSProperties; // تضمین ساختار استاندارد CSS
}

function Box({ title, style }: BoxComponentProps) {
  return <div style={style}>{title}</div>;
}

مزایای کلیدی استفاده از React.CSSProperties:

1. اعتبارسنجی مقادیر (Validation): تایپ‌اسکریپت بررسی می‌کند که تمام ویژگی‌های نوشته شده (مانند backgroundColor یا fontSize) کاملاً مطابق با استانداردهای CSS باشند و جلوی غلط‌های املایی را می‌گیرد.

2. راهنمای هوشمند (Auto-complete): به محض اینکه درون شیء استایل شروع به تایپ کنید، ویرایشگر تمام ویژگی‌های معتبر سی‌اس‌اس را به همراه مقادیر مجاز آن‌ها به شما پیشنهاد می‌دهد.