تایپ‌اسکریپت با ری‌اکت: بهترین شیوه‌ها برای برنامه‌های مقیاس‌پذیر و قابل نگهداری

تایپ‌اسکریپت و ری‌اکت ترکیبی قدرتمند برای ساخت برنامه‌های وب مدرن هستند. تایپ‌اسکریپت با افزودن تایپ‌دهی استاتیک به جاوااسکریپت، کیفیت کد و قابلیت نگهداری را بهبود می‌بخشد، در حالی که ری‌اکت رویکردی اعلانی و مبتنی بر کامپوننت برای ساخت رابط‌های کاربری ارائه می‌دهد. این پست وبلاگ به بررسی بهترین شیوه‌ها برای استفاده از تایپ‌اسکریپت با ری‌اکت برای ایجاد برنامه‌های قوی، مقیاس‌پذیر و قابل نگهداری مناسب برای مخاطبان جهانی می‌پردازد.

چرا از تایپ‌اسکریپت با ری‌اکت استفاده کنیم؟

قبل از پرداختن به بهترین شیوه‌ها، بیایید بفهمیم چرا تایپ‌اسکریپت یک افزودنی ارزشمند برای توسعه ری‌اکت است:

• کیفیت کد بهبود یافته: تایپ‌دهی استاتیک تایپ‌اسکریپت به شناسایی خطاها در مراحل اولیه فرآیند توسعه کمک می‌کند، که منجر به کاهش مشکلات زمان اجرا و بهبود قابلیت اطمینان کد می‌شود.
• قابلیت نگهداری پیشرفته: حاشیه‌نویسی‌های تایپ و اینترفیس‌ها درک و بازسازی کد را آسان‌تر می‌کنند و به قابلیت نگهداری بهتر در بلندمدت منجر می‌شوند.
• پشتیبانی بهتر از IDE: تایپ‌اسکریپت پشتیبانی عالی از IDE ارائه می‌دهد، از جمله تکمیل خودکار کد، ناوبری کد و ابزارهای بازسازی، که بهره‌وری توسعه‌دهندگان را افزایش می‌دهد.
• کاهش باگ‌ها: تایپ‌دهی استاتیک بسیاری از خطاهای رایج جاوااسکریپت را قبل از زمان اجرا شناسایی می‌کند، که منجر به برنامه‌ای پایدارتر و بدون باگ می‌شود.
• همکاری بهبود یافته: تعریف‌های تایپ واضح، همکاری تیم‌ها در پروژه‌های بزرگ را آسان‌تر می‌کند، زیرا توسعه‌دهندگان می‌توانند به سرعت هدف و کاربرد کامپوننت‌ها و توابع مختلف را درک کنند.

راه‌اندازی یک پروژه ری‌اکت با تایپ‌اسکریپت

استفاده از Create React App

ساده‌ترین راه برای شروع یک پروژه جدید ری‌اکت با تایپ‌اسکریپت، استفاده از Create React App با الگوی تایپ‌اسکریپت است:

npx create-react-app my-typescript-react-app --template typescript

این دستور یک پروژه پایه ری‌اکت را با تایپ‌اسکریپت پیکربندی شده راه‌اندازی می‌کند، شامل وابستگی‌های لازم و یک فایل tsconfig.json.

پیکربندی tsconfig.json

فایل tsconfig.json قلب پیکربندی تایپ‌اسکریپت شماست. در اینجا برخی از تنظیمات پیشنهادی آورده شده است:

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

گزینه‌های کلیدی که باید در نظر بگیرید:

• "strict": true: بررسی دقیق تایپ را فعال می‌کند، که برای شناسایی خطاهای احتمالی بسیار توصیه می‌شود.
• "esModuleInterop": true: قابلیت همکاری بین ماژول‌های CommonJS و ES را فعال می‌کند.
• "jsx": "react-jsx": تبدیل جدید JSX را فعال می‌کند، که کد ری‌اکت را ساده‌تر کرده و عملکرد را بهبود می‌بخشد.

بهترین شیوه‌ها برای کامپوننت‌های ری‌اکت با تایپ‌اسکریپت

تایپ‌دهی پراپ‌های کامپوننت

یکی از مهم‌ترین جنبه‌های استفاده از تایپ‌اسکریپت با ری‌اکت، تایپ‌دهی صحیح پراپ‌های کامپوننت شماست. از اینترفیس‌ها یا type aliasها برای تعریف شکل شیء پراپ‌ها استفاده کنید.

interface MyComponentProps {
  name: string;
  age?: number; // پراپ اختیاری
  onClick: () => void;
}

const MyComponent: React.FC = ({ name, age, onClick }) => {
  return (
    

      
Hello, {name}!
      {age && 
You are {age} years old.
}
      Click me
    
  );
};

استفاده از React.FC<MyComponentProps> تضمین می‌کند که کامپوننت یک کامپوننت تابعی است و پراپ‌ها به درستی تایپ‌دهی شده‌اند.

تایپ‌دهی استیت کامپوننت

اگر از کامپوننت‌های کلاسی استفاده می‌کنید، باید استیت کامپوننت را نیز تایپ‌دهی کنید. یک اینترفیس یا type alias برای شیء استیت تعریف کرده و آن را در تعریف کامپوننت استفاده کنید.

interface MyComponentState {
  count: number;
}

class MyComponent extends React.Component<{}, MyComponentState> {
  state: MyComponentState = {
    count: 0
  };

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  };

  render() {
    return (
      

        
Count: {this.state.count}
        Increment
      
    );
  }
}

برای کامپوننت‌های تابعی که از هوک useState استفاده می‌کنند، تایپ‌اسکریپت اغلب می‌تواند تایپ متغیر استیت را استنتاج کند، اما شما می‌توانید آن را به صراحت نیز مشخص کنید:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

استفاده از Type Guardها

Type Guardها توابعی هستند که تایپ یک متغیر را در یک محدوده خاص محدودتر می‌کنند. آنها هنگام کار با تایپ‌های union یا زمانی که نیاز دارید قبل از انجام یک عملیات از تایپ خاص یک متغیر اطمینان حاصل کنید، مفید هستند.

interface Circle {
  kind: "circle";
  radius: number;
}

interface Square {
  kind: "square";
  side: number;
}

type Shape = Circle | Square;

function isCircle(shape: Shape): shape is Circle {
  return shape.kind === "circle";
}

function getArea(shape: Shape): number {
  if (isCircle(shape)) {
    return Math.PI * shape.radius ** 2;
  } else {
    return shape.side ** 2;
  }
}

تابع isCircle یک Type Guard است که بررسی می‌کند آیا یک Shape یک Circle است یا خیر. در داخل بلوک if، تایپ‌اسکریپت می‌داند که shape یک Circle است و به شما اجازه دسترسی به خاصیت radius آن را می‌دهد.

مدیریت رویدادها

هنگام مدیریت رویدادها در ری‌اکت با تایپ‌اسکریپت، تایپ‌دهی صحیح شیء رویداد بسیار مهم است. از تایپ رویداد مناسب از فضای نام React استفاده کنید.

const MyComponent: React.FC = () => {
  const handleChange = (event: React.ChangeEvent) => {
    console.log(event.target.value);
  };

  return (
    
  );
};

در این مثال، از React.ChangeEvent<HTMLInputElement> برای تایپ‌دهی شیء رویداد برای یک رویداد change روی یک عنصر input استفاده شده است. این کار دسترسی به خاصیت target را فراهم می‌کند که یک HTMLInputElement است.

ساختار پروژه

یک پروژه با ساختار خوب برای قابلیت نگهداری و مقیاس‌پذیری حیاتی است. در اینجا یک ساختار پروژه پیشنهادی برای یک برنامه ری‌اکت با تایپ‌اسکریپت آورده شده است:

src/
├── components/
│   ├── MyComponent/
│   │   ├── MyComponent.tsx
│   │   ├── MyComponent.module.css
│   │   └── index.ts
├── pages/
│   ├── HomePage.tsx
│   └── AboutPage.tsx
├── services/
│   ├── api.ts
│   └── auth.ts
├── types/
│   ├── index.ts
│   └── models.ts
├── utils/
│   ├── helpers.ts
│   └── constants.ts
├── App.tsx
├── index.tsx
├── react-app-env.d.ts
└── tsconfig.json

نکات کلیدی:

• Components: کامپوننت‌های مرتبط را در دایرکتوری‌ها گروه‌بندی کنید. هر دایرکتوری باید شامل فایل تایپ‌اسکریپت کامپوننت، ماژول‌های CSS (در صورت استفاده) و یک فایل index.ts برای اکسپورت کامپوننت باشد.
• Pages: کامپوننت‌های سطح بالا که صفحات مختلف برنامه شما را نشان می‌دهند در اینجا ذخیره کنید.
• Services: فراخوانی‌های API و سایر سرویس‌ها را در این دایرکتوری پیاده‌سازی کنید.
• Types: تعاریف تایپ و اینترفیس‌های سراسری را در این دایرکتوری تعریف کنید.
• Utils: توابع کمکی و ثابت‌ها را در اینجا ذخیره کنید.
• index.ts: از فایل‌های index.ts برای اکسپورت مجدد ماژول‌ها از یک دایرکتوری استفاده کنید تا یک API تمیز و سازمان‌یافته برای ایمپورت ماژول‌ها فراهم شود.

استفاده از هوک‌ها با تایپ‌اسکریپت

هوک‌های ری‌اکت به شما اجازه می‌دهند از استیت و سایر ویژگی‌های ری‌اکت در کامپوننت‌های تابعی استفاده کنید. تایپ‌اسکریپت به طور یکپارچه با هوک‌ها کار می‌کند و ایمنی تایپ و تجربه توسعه‌دهنده بهتری را فراهم می‌کند.

useState

همانطور که قبلاً نشان داده شد، می‌توانید هنگام استفاده از useState به صراحت تایپ متغیر استیت را مشخص کنید:

import React, { useState } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

useEffect

هنگام استفاده از useEffect، به آرایه وابستگی‌ها توجه داشته باشید. تایپ‌اسکریپت می‌تواند به شما در شناسایی خطاها کمک کند اگر فراموش کنید وابستگی‌ای را که در داخل effect استفاده شده است، اضافه کنید.

import React, { useState, useEffect } from 'react';

const MyComponent: React.FC = () => {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Count: ${count}`;
  }, [count]); // 'count' را به آرایه وابستگی‌ها اضافه کنید

  return (
    

      
Count: {count}
       setCount(count + 1)}>Increment
    
  );
};

اگر count را از آرایه وابستگی‌ها حذف کنید، effect فقط یک بار هنگام mount شدن کامپوننت اجرا می‌شود و عنوان سند با تغییر شمارنده به‌روز نمی‌شود. تایپ‌اسکریپت در مورد این مشکل احتمالی به شما هشدار می‌دهد.

useContext

هنگام استفاده از useContext، باید یک تایپ برای مقدار context ارائه دهید.

import React, { createContext, useContext } from 'react';

interface ThemeContextType {
  theme: string;
  toggleTheme: () => void;
}

const ThemeContext = createContext(undefined);

const ThemeProvider: React.FC = ({ children }) => {
  // منطق تم را در اینجا پیاده‌سازی کنید
  return (
     {} }}>
      {children}
    
  );
};

const MyComponent: React.FC = () => {
  const { theme, toggleTheme } = useContext(ThemeContext) as ThemeContextType;

  return (
    

      
Theme: {theme}
      Toggle Theme
    
  );
};

export { ThemeProvider, MyComponent };

با ارائه یک تایپ برای مقدار context، تضمین می‌کنید که هوک useContext مقداری با تایپ صحیح را برمی‌گرداند.

تست کامپوننت‌های ری‌اکت با تایپ‌اسکریپت

تست بخش ضروری ساخت برنامه‌های قوی است. تایپ‌اسکریپت با ارائه ایمنی تایپ و پوشش کد بهتر، تست را بهبود می‌بخشد.

تست واحد (Unit Testing)

از فریم‌ورک‌های تست مانند Jest و React Testing Library برای تست واحد کامپوننت‌های خود استفاده کنید.

// MyComponent.test.tsx
import React from 'react';
import { render, screen, fireEvent } from '@testing-library/react';
import MyComponent from './MyComponent';

describe('MyComponent', () => {
  it('renders the component with the correct name', () => {
    render();
    expect(screen.getByText('Hello, John!')).toBeInTheDocument();
  });

  it('calls the onClick handler when the button is clicked', () => {
    const onClick = jest.fn();
    render();
    fireEvent.click(screen.getByRole('button'));
    expect(onClick).toHaveBeenCalledTimes(1);
  });
});

بررسی تایپ تایپ‌اسکریپت به شناسایی خطاها در تست‌های شما کمک می‌کند، مانند پاس دادن پراپ‌های نادرست یا استفاده از event handlerهای اشتباه.

تست یکپارچه‌سازی (Integration Testing)

تست‌های یکپارچه‌سازی تأیید می‌کنند که بخش‌های مختلف برنامه شما به درستی با هم کار می‌کنند. از ابزارهایی مانند Cypress یا Playwright برای تست end-to-end استفاده کنید.

بهینه‌سازی عملکرد

تایپ‌اسکریپت همچنین می‌تواند با شناسایی گلوگاه‌های عملکردی بالقوه در مراحل اولیه فرآیند توسعه، به بهینه‌سازی عملکرد کمک کند.

مموسازی (Memoization)

از React.memo برای مموسازی کامپوننت‌های تابعی و جلوگیری از رندرهای غیرضروری استفاده کنید.

import React from 'react';

interface MyComponentProps {
  name: string;
}

const MyComponent: React.FC = ({ name }) => {
  console.log('Rendering MyComponent');
  return (
    
Hello, {name}!
  );
};

export default React.memo(MyComponent);

React.memo فقط در صورتی کامپوننت را دوباره رندر می‌کند که پراپ‌های آن تغییر کرده باشند. این می‌تواند عملکرد را به طور قابل توجهی بهبود بخشد، به خصوص برای کامپوننت‌های پیچیده.

تقسیم کد (Code Splitting)

از ایمپورت‌های داینامیک برای تقسیم کد خود به قطعات کوچکتر و بارگذاری آنها بر حسب تقاضا استفاده کنید. این می‌تواند زمان بارگذاری اولیه برنامه شما را کاهش دهد.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

const App: React.FC = () => {
  return (
    Loading...