TypeScript یک superset از JavaScript است که type checking ایستا را به زبان اضافه می‌کند. این ویژگی به توسعه‌دهندگان کمک می‌کند خطاها را زودتر تشخیص دهند و کد قابل نگهداری‌تری بنویسند.

نصب و راه‌اندازی TypeScript در پروژه React

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

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

یا اگر پروژه React شما از قبل وجود دارد، می‌توانید TypeScript را با نصب packages لازم اضافه کنید:

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

تعریف انواع برای Props کامپوننت‌ها

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

interface ButtonProps {
  label: string;
  onClick: () => void;
  disabled?: boolean;
  variant?: 'primary' | 'secondary';
}

const Button: React.FC<ButtonProps> = ({ label, onClick, disabled = false, variant = 'primary' }) => {
  return (
    <button onClick={onClick} disabled={disabled} className={`btn btn-${variant}`}>
      {label}
    </button>
  );
};

Typing هوک‌های React

TypeScript با هوک‌های React نیز به خوبی کار می‌کند. در مثال زیر، نحوه typing useState و useEffect را مشاهده می‌کنید:

interface User {
  id: number;
  name: string;
  email: string;
}

const UserProfile: React.FC = () => {
  const [user, setUser] = useState<User | null>(null);
  const [loading, setLoading] = useState<boolean>(true);
  
  useEffect(() => {
    fetchUser().then(userData => {
      setUser(userData);
      setLoading(false);
    });
  }, []);
  
  if (loading) return <div>Loading...</div>;
  if (!user) return <div>User not found</div>;
  
  return (
    <div>
      <h1>{user.name}</h1>
      <p>{user.email}</p>
    </div>
  );
};

نتیجه‌گیری

استفاده از TypeScript در پروژه‌های React نه تنها به کاهش خطاها کمک می‌کند، بلکه documentation داخلی ایجاد کرده و collaboration بین توسعه‌دهندگان را بهبود می‌بخشد. با یادگیری نحوه صحیح typing کامپوننت‌ها، هوک‌ها و داده‌ها، می‌توانید از مزایای کامل TypeScript در توسعه برنامه‌های React بهره‌مند شوید.