TypeScript مع React

لماذا TypeScript مع React؟

دمج TypeScript مع React يجعل مكوّناتك آمنة: تعرف بالضبط ما الـ props التي يستقبلها كل مكوّن، ويمنعك المحرّر من تمرير قيم خاطئة.

ملفات React مع TypeScript تأخذ الامتداد .tsx.

كتابة أنواع props

نصف الـ props بـ type أو interface:

type GreetingProps = {
  name: string;
  age?: number;
};

function Greeting({ name, age }: GreetingProps) {
  return (
    <p>
      {name} {age && `- ${age}`}
    </p>
  );
}

الآن استدعاء <Greeting /> بلا name أو بـ name={5} = خطأ فوري.

useState مع الأنواع

غالبًا يستنتج النوع تلقائيًا:

const [count, setCount] = useState(0); // number تلقائيًا

وعند الحاجة نحدّده صراحةً:

const [user, setUser] = useState<string | null>(null);

معالج حدث بالأنواع

function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
  console.log(e.target.value);
}

🎯 التالي: البدء والإعداد — نتعمّق في tsc وtsconfig وبقية مزايا TypeScript خطوة بخطوة نحو الاحتراف.