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);
}

🎉 أكملت أساسيات TypeScript! أصبحت تكتب كودًا أكثر أمانًا واحترافية. اختبر نفسك واحصل على شهادتك.