تبديد الغموض: إعلانات دوال ومكونات React TypeScript

شفافية المحتوى: تم توليد وتنسيق هذا المقال آلياً عبر محرك Sawan AI لتقديم محتوى تقني دقيق، مباشر، وخالٍ من الحشو المزعج.

في عالم تطوير الواجهات الأمامية الحديث، أصبحت React.js و TypeScript ثنائيًا لا غنى عنه لإنشاء تطبيقات قوية وقابلة للصيانة. ومع ذلك، يواجه العديد من المطورين، خاصة الجدد منهم، بعض الالتباس عند محاولة فهم كيفية إعلان الدوال العادية ومكونات React الوظيفية (Function Components) باستخدام TypeScript. يهدف هذا المقال إلى تبديد هذا الغموض من خلال تقديم شروحات عملية وأمثلة واضحة.

---

فهم الالتباس الأساسي

ينبع الالتباس غالبًا من حقيقة أن كلًا من الدوال العادية ومكونات React الوظيفية هي في جوهرها دوال JavaScript. ومع ذلك، فإن سياقهما واستخدامهما في تطبيق React يختلفان بشكل كبير. تتوقع React أن تعيد المكونات الوظيفية عناصر JSX، بينما يمكن للدوال العادية أن تعيد أي نوع من البيانات أو لا تعيد شيئًا على الإطلاق (void). يضيف TypeScript طبقة من التحقق الثابت للنوع (Static Type Checking) التي تتطلب تحديد أنواع المدخلات والمخرجات بدقة، مما يجعل التمييز بينهما أكثر أهمية.

---

إعلان الدوال العادية في TypeScript

عند إعلان دالة JavaScript عادية في TypeScript، يجب تحديد أنواع المعاملات (Parameters) ونوع القيمة المرتجعة (Return Type) بشكل صريح. هذا يضمن أن الدالة تعمل بالبيانات المتوقعة وتعيد النوع الصحيح، مما يحسن من موثوقية الكود.

الدوال المسماة (Named Functions)

هذا هو الشكل التقليدي لإعلان الدالة، حيث يتم تحديد اسمها وأنواعها بوضوح.

function sum(a: number, b: number): number {
  return a + b;
}

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

دوال السهم (Arrow Functions)

تُستخدم دوال السهم بشكل شائع في JavaScript الحديثة، ويمكن تطبيق نفس مبادئ تحديد الأنواع عليها.

const multiply = (a: number, b: number): number => a * b;

const logMessage = (message: string): void => {
  console.log(message);
};

معلومة!
تذكر أن هذه الدوال لا ترتبط بـ React بشكل مباشر؛ إنها مجرد دوال مساعدة يمكن استخدامها في أي جزء من تطبيقك.

---

إعلان مكونات React الوظيفية في TypeScript

تختلف مكونات React الوظيفية عن الدوال العادية في أنها تتلقى props كمعامل وحيد وتعيد عناصر JSX. هناك طريقتان رئيسيتان لتحديد أنواع هذه المكونات في TypeScript.

استخدام React.FC (أو FC)

كان React.FC (اختصار لـ Function Component) هو النمط الموصى به لتحديد أنواع مكونات React الوظيفية. يوفر هذا النوع بعض الميزات مثل تضمين نوع children بشكل ضمني.

import React from 'react';

interface GreetingProps {
  name: string;
  age?: number; // خاصية اختيارية
}

const Greeting: React.FC<GreetingProps> = ({ name, age }) => {
  return (
    <div>
      <h2>Hello, {name}!</h2>
      {age && <p>You are {age} years old.</p>}
    </div>
  );
};

export default Greeting;

تحذير!
على الرغم من شيوع React.FC، إلا أنه لم يعد النمط الموصى به في العديد من المشاريع الحديثة. أحد أسباب ذلك هو أنه يضيف children كخاصية اختيارية بشكل ضمني، مما قد يؤدي إلى سلوك غير متوقع إذا لم تكن تتوقع children دائمًا.

النمط المباشر (الموصى به)

يُعد تحديد أنواع الخصائص مباشرة في معامل الدالة هو النمط المفضل حاليًا. يمنحك هذا تحكمًا أكبر في أنواع الخصائص، بما في ذلك children.

import React from 'react';

interface ButtonProps {
  onClick: () => void;
  label: string;
  children?: React.ReactNode; // تحديد <code>children</code> بشكل صريح
}

const Button = ({ onClick, label, children }: ButtonProps) => {
  return (
    <button onClick={onClick}>
      {label}
      {children}
    </button>
  );
};

export default Button;

إذا كنت تتوقع دائمًا وجود children، يمكنك استخدام React.PropsWithChildren لتسهيل الأمر:

import React from 'react';

interface CardProps {
  title: string;
}

const Card = ({ title, children }: React.PropsWithChildren<CardProps>) => {
  return (
    <div style={{ border: '1px solid gray', padding: '10px' }}>
      <h3>{title}</h3>
      {children}
    </div>
  );
};

export default Card;

---

أفضل الممارسات والنصائح

1. كن صريحًا دائمًا: حدد أنواع المعاملات والقيم المرتجعة بوضوح لكل من الدوال العادية والمكونات.
2. تفضيل النمط المباشر للمكونات: استخدم تحديد أنواع الخصائص مباشرة في معامل الدالة لمكونات React الوظيفية. هذا يمنحك تحكمًا أفضل ووضوحًا أكبر.
3. استخدم React.PropsWithChildren عند الحاجة: إذا كان مكونك يتوقع children دائمًا، فإن React.PropsWithChildren طريقة نظيفة لإضافة هذا النوع دون كتابته يدويًا.
4. فهم React.ReactNode: استخدم React.ReactNode لخاصية children عندما يمكن أن تكون أي شيء يمكن لـ React عرضه (سلاسل، أرقام، عناصر JSX، مصفوفات من هذه الأنواع، إلخ).

حل!
باتباع هذه الإرشادات، يمكنك كتابة كود React و TypeScript أكثر وضوحًا وقابلية للصيانة، مما يقلل من الالتباس ويحسن تجربة التطوير.

المشاركات ذات الصلة

المقال الأصلي:
تبديد الغموض: إعلانات دوال ومكونات React TypeScript
المصدر: صوان محور XYZ
شكر خاص لـ GEMINI و جمال الحزازي.