TypeScript مع React

كتابة مكونات React بـ TypeScript

لماذا TypeScript مع React؟

TypeScript شائع جداً مع React. يساعد في اكتشاف الأخطاء مبكراً وتحسين تجربة المطور بالإكمال التلقائي وجعل إعادة الهيكلة أكثر أماناً.

💡 المعيار الصناعي:

معظم مشاريع React الجديدة تستخدم TypeScript افتراضياً. تعلم TypeScript + React معاً ضروري لتطوير الويب الحديث.

إعداد TypeScript مع Next.js

Next.js يدعم TypeScript بشكل مدمج

فقط أضف tsconfig.json إلى جذر مشروعك

غيّر اسم الملفات .js/.jsx إلى .ts/.tsx

سيقوم Next.js بتكوين TypeScript تلقائياً

كتابة أنواع خصائص المكون

في React مع TypeScript، تُعرّف أنواع الخصائص التي يقبلها مكونك:

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

function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
  return (
    <button onClick={onClick} className={`btn btn-${variant}`}>
      {label}
    </button>
  );
}

كتابة نوع الحالة

يمكن كتابة نوع لـ useState hook للتأكد من أن الحالة具有correct نوع:

tsx
const [count, setCount] = useState<number>(0);
const [name, setName] = useState<string>('');
const [user, setUser] = useState<User | null>(null);

كتابة أنواع الأحداث

يمكن كتابة أنواع لأحداث React لأمان نوع أفضل:

tsx
function handleSubmit(e: React.FormEvent<HTMLFormElement>) {
  e.preventDefault();
  // منطق النموذج
}

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

ملخص الدرس

يكتشف TypeScript الأخطاء مبكراً في مكونات React

Next.js يدعم TypeScript بشكل مدمج

تُكتب الخصائص بواجهات أو أنواع

يقبل useState معامل نوع عام

يمكن كتابة أنواع الأحداث لأمان أفضل

❓Quiz

كيف تكتب نوعاً للخصائص في مكون React؟

❓Quiz

كيف تكتب نوعاً لـ useState hook؟

❓Quiz

أي امتداد ملف يُستخدم لمكونات React في TypeScript؟

🎯بناء مكونات مكتوبة بأنواع

أنشئ مكون Card بخصائص مكتوبة بنوع ونموذج بأحداث مكتوبة بنوع وعدّاد بحالة مكتوبة بنوع.

الحل:

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

function Button(props: ButtonProps) {
  return (
    <button
      onClick={props.onClick}
      className={
        props.variant === "secondary"
          ? "bg-gray-500 text-white px-4 py-2 rounded"
          : "bg-blue-500 text-white px-4 py-2 rounded"
      }
      disabled={props.disabled}
    >
      {props.text}
    </button>
  );
}

// Usage Examples:
<Button text="Click me" onClick={() => console.log("clicked")} />

📋ملخص TypeScript React

أنماط المكونات:

.tsx — امتداد ملف TypeScript React
interface Props {} — تعريف نوع خصائص المكون
function Comp({}: Props) — كتابة نوع الخصائص في الدالة
React.FC — نوع المكون الدالة (أقل شيوعاً)

الخطافات والأحداث:

useState(init) — كتابة نوع الحالة بالعام
React.FormEvent — نوع حدث النموذج
React.ChangeEvent — نوع حدث تغيير الإدخال
useRef(init) — مرجع مكتوب بنوع

→

الدرس السابق

🔷 الدوال والأنواع العامة

الدرس التالي

🔷 مشروع TypeScript تطبيقي

←

جاري التحميل...

لماذا TypeScript مع React؟

💡 المعيار الصناعي:

معظم مشاريع React الجديدة تستخدم TypeScript افتراضياً. تعلم TypeScript + React معاً ضروري لتطوير الويب الحديث.

كتابة أنواع خصائص المكون

في React مع TypeScript، تُعرّف أنواع الخصائص التي يقبلها مكونك:

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

function Button({ label, onClick, variant = 'primary' }: ButtonProps) {
  return (
    <button onClick={onClick} className={`btn btn-${variant}`}>
      {label}
    </button>
  );
}

function handleSubmit(e: React.FormEvent<HTMLFormElement>) { e.preventDefault(); // منطق النموذج } function handleChange(e: React.ChangeEvent<HTMLInputElement>) { const value = e.target.value; }

interface ButtonProps { text: string; onClick: () => void; variant?: "primary" | "secondary"; disabled?: boolean; } function Button(props: ButtonProps) { return ( <button onClick={props.onClick} className={ props.variant === "secondary" ? "bg-gray-500 text-white px-4 py-2 rounded" : "bg-blue-500 text-white px-4 py-2 rounded" } disabled={props.disabled} > {props.text} </button> ); } // Usage Examples: <Button text="Click me" onClick={() => console.log("clicked")} />