استفاده از TypeScript در React

زبان TypeScript یک راهکار فوق‌العاده محبوب برای اضافه کردن سیستم تعیین نوع (Type Definitions) به پروژه‌های جاوااسکریپت است. این زبان به صورت پیش‌فرض از سینتکس JSX پشتیبانی می‌کند و شما می‌توانید با اضافه کردن پکیج‌های @types/react و @types/react-dom به پروژه خود، از پشتیبانی کامل و هوشمند تایپ‌اسکریپت در وب بهره‌مند شوید.

راه‌اندازی و نصب (Installation)

تمامی فریم‌ورک‌های استاندارد و مدرن React (مانند Next.js، Remix، Gatsby و Expo) به صورت بومی و داخلی از TypeScript پشتیبانی می‌کنند و در زمان ساخت پروژه، تنظیمات آن را برای شما انجام می‌دهند.

اضافه کردن TypeScript به یک پروژه React موجود

اگر یک پروژه جاوااسکریپتی دارید و می‌خواهید تایپ‌اسکریپت را به آن اضافه کنید، ابتدا باید تعاریف نوعِ مربوط به راکت را با دستور زیر نصب کنید:

npm install --save-dev @types/react @types/react-dom

سپس باید تنظیمات زیر را در فایل پیکربندی tsconfig.json خود اعمال کنید:

1. تنظیم کدهای محیط وب: عبارت "dom" باید در آرایه "lib" قرار بگیرد (نکته: اگر گزینه lib را به طور کلی در فایل ننویسید، قابلیت‌های dom به صورت پیش‌فرض اعمال می‌شوند).

2. تنظیم سیستم JSX: گزینه "jsx" باید روی یکی از مقادیر معتبر تنظیم شود. مقدار "preserve" برای اکثر برنامه‌ها کاملاً مناسب است. اما اگر در حال انتشار یک کتابخانه (Library) هستید، مستندات اختصاصی آن را مطالعه کنید.

قانون کلیدی فایل‌ها: هر فایلی که حاوی کدهای استاندارد React یا همان تگ‌های JSX است، حتماً باید از پسوند .tsx استفاده کند. این پسوند اختصاصی به کامپایلر تایپ‌اسکریپت اعلام می‌کند که این فایل حاوی کدهای رابط کاربری است.

استفاده از TypeScript در کامپوننت‌های React

کدنویسی با TypeScript در React شباهت بسیار زیادی به جاوااسکریپت دارد. تفاوت اصلی و حیاتی این است که شما می‌توانید برای ورودی‌های کامپوننت خود (Props)، نوع داده مشخص کنید. این کار به ویرایشگر کد شما اجازه می‌دهد تا در صورت وارد کردن داده اشتباه خطا بگیرد و راهنمای هوشمندی (Auto-complete) را در حین کدنویسی نمایش دهد.

۱. روش خطی و ساده (Inline Syntax)

ساده‌ترین راه برای مشخص کردن نوع داده‌ی یک ورودی، نوشتن مستقیم آن در جلوی آرگومان کامپوننت است. در مثال زیر، مشخص کرده‌ایم که ورودی title حتماً باید یک رشته متنی (string) باشد:

// App.tsx
function MyButton({ title }: { title: string }) {
  return (
    <button>{title}</button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>به برنامه من خوش آمدید</h1>
      {/* اگر در بخش زیر مقداری به جز string بفرستید، ویرایشگر خطا می‌دهد */}
      <MyButton title="من یک دکمه هستم" />
    </div>
  );
}

۲. روش استاندارد با استفاده از interface یا type

اگرچه ساختار خطی بالا برای کامپوننت‌های کوچک کارآمد است، اما با افزایش تعداد ورودی‌ها، کد شما به شدت شلوغ و ناخوانا خواهد شد. راهکار اصولی و حرفه‌ای، تعریف یک interface یا type مجزا برای توصیف ویژگی‌های کامپوننت است:

// App.tsx
interface MyButtonProps {
  /** متنی که قرار است داخل دکمه نمایش داده شود */
  title: string;
  /** آیا دکمه غیرفعال است یا خیر */
  disabled: boolean;
}

function MyButton({ title, disabled }: MyButtonProps) {
  return (
    <button disabled={disabled}>{title}</button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>به برنامه من خوش آمدید</h1>
      <MyButton title="من یک دکمه غیرفعال هستم" disabled={true} />
    </div>
  );
}

مزیت مستندسازی (JSDoc Comments): توجه کنید که در کد بالا، توضیحات هر ویژگی را بین عبارات /** ... */ قرار داده‌ایم. با این کار، هر زمان که در بخش‌های دیگر پروژه روی نام ورودی‌ها (مانند title یا disabled) موس خود را نگه دارید (Hover کنید)، این توضیحات به صورت یک پنجره راهنمای کوچک برای شما یا هم‌تیمی‌هایتان نمایش داده می‌شود.

تایپ‌های ورودی کامپوننت می‌توانند به اندازه نیاز پروژه شما ساده یا فوق‌العاده پیچیده باشند؛ اما ساختار اصلی آن‌ها همواره باید به شکل یک شیء (Object Type) تعریف شود. برای سناریوهای پیشرفته‌تر، شما می‌توانید از Union Types (برای زمانی که یک ورودی می‌تواند چند نوع داده مختلف را بپذیرد) استفاده کنید.