استخدام TypeScript مع React

الدرس الخامس والعشرون: استخدام TypeScript مع React

في هذا الدرس، سنتعرف على كيفية دمج TypeScript مع React. سنستعرض كيفية تعريف الأنواع للمكونات في React باستخدام TypeScript، وكيفية التعامل مع props و state في مكونات React باستخدام TypeScript.

1. ما هو TypeScript؟

TypeScript هو امتداد للغة JavaScript يقدم نظامًا قويًا للأنواع (types). يضيف TypeScript أنواع ثابتة (static types) إلى JavaScript، مما يساعد المطورين على اكتشاف الأخطاء في وقت الترجمة بدلاً من وقت التنفيذ. كما يقدم ميزات متقدمة مثل الواجهات (interfaces) و التراكيب الجينية (generics) التي تسهم في تحسين جودة الكود وسهولة صيانته.

2. كيفية دمج TypeScript مع React

لتكامل TypeScript مع React، يجب أولاً إعداد بيئة العمل. إليك كيفية إنشاء مشروع React مع TypeScript باستخدام create-react-app:

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

أو إذا كنت قد أنشأت مشروعًا سابقًا بـ JavaScript، يمكنك إضافة TypeScript يدويًا عبر تثبيت الحزم التالية:

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

بعد تثبيت الحزم، يمكنك تغيير امتداد الملفات من .js إلى .tsx للملفات التي تحتوي على مكونات React (لأن TypeScript يحتاج إلى امتداد .tsx للعمل مع JSX).

3. تعريف الأنواع للمكونات في React باستخدام TypeScript

في React باستخدام JavaScript، لا يتم تحديد أنواع props و state، لكن مع TypeScript، يمكن تحديد الأنواع بدقة. إليك كيفية تعريف الأنواع للمكونات.

مكونات React مع الأنواع

مكونات الدالة (Function Components):

import React from 'react';

// تعريف الأنواع للـ props
interface ButtonProps {
  label: string;
  onClick: () => void;
}

// مكون Button مع props
const Button: React.FC<ButtonProps> = ({ label, onClick }) => {
  return (
    <button onClick={onClick}>
      {label}
    </button>
  );
}

export default Button;

الشرح:

• interface ButtonProps: هنا نعرّف واجهة (interface) لتحديد الأنواع التي يجب أن تتبعها props في المكون Button. نحدد أن label هو string و onClick هو دالة تأخذ قيمة void.
• React.FC: نستخدم React.FC (اختصار لـ React.FunctionComponent) لتمرير واجهة ButtonProps إلى المكون. هذه الطريقة تعني أن Button هو مكون دالة يقبل props التي تمت مطابقتها مع ButtonProps.

مكونات الفئة (Class Components):

import React, { Component } from 'react';

// تعريف الأنواع للـ props و الـ state
interface CounterProps {
  initialCount: number;
}

interface CounterState {
  count: number;
}

class Counter extends Component<CounterProps, CounterState> {
  constructor(props: CounterProps) {
    super(props);
    this.state = {
      count: this.props.initialCount
    };
  }

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

export default Counter;

الشرح:

• CounterProps: تحتوي على initialCount الذي نمرره كمُدخل عند استخدام المكون.
• CounterState: تحدد حالة المكون، وهي count هنا.
• Component<CounterProps, CounterState>: مع class components، نحدد الأنواع لكل من props و state داخل القالب العام لـ Component.

4. التعامل مع props و state باستخدام TypeScript

تعريف الأنواع للـ props:

في TypeScript، نستخدم interface أو type لتعريف الأنواع الخاصة بالـ props. يمكن تمرير الأنواع إلى المكونات كما رأينا في الأمثلة السابقة.

مثال على تعريف الـ props باستخدام type:

type ButtonProps = {
  label: string;
  onClick: () => void;
};

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

تعريف الأنواع للـ state:

تعريف الأنواع للـ state في React مع TypeScript مشابه لتعريف الأنواع للـ props. يمكن استخدام interface أو type لتعريف state.

مثال على تعريف الـ state:

interface AppState {
  count: number;
}

class Counter extends React.Component<{}, AppState> {
  state: AppState = {
    count: 0
  };

  increment = () => {
    this.setState({ count: this.state.count + 1 });
  };

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.increment}>Increment</button>
      </div>
    );
  }
}

الشرح:

• AppState: تعريف الأنواع للـ state. في هذه الحالة، يحتوي state على خاصية count من النوع number.
• نحدد state: AppState داخل الكود كجزء من مكون الفئة.

5. إضافة الأنواع للدوال:

يمكنك أيضًا إضافة الأنواع لدوال التعامل مع الأحداث أو أي دوال أخرى داخل المكونات.

const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
  console.log(event);
};

الشرح:

• في هذا المثال، نقوم بتحديد نوع event الذي نمرره إلى دالة handleClick باستخدام React.MouseEvent، وهو نوع محدد لهذا الحدث عند حدوثه على button.

6. الاستفادة من TypeScript مع React:

• السلامة النوعية: TypeScript يساعد في تجنب الأخطاء الشائعة مثل تمرير أنواع غير صحيحة للـ props أو state.
• سهولة الصيانة: يمكنك بسهولة معرفة نوع البيانات في أي مكون أو دالة داخل الكود.
• الدعم المتقدم: مع TypeScript، ستحصل على دعم قوي من المحررات مثل VSCode مع التلميحات التلقائية والتكملة التلقائية للكود.
• الأداء المحسن: لا يؤثر TypeScript على أداء التطبيق عند الترجمة إلى JavaScript، لكنه يساعد في تحسين الجودة ووضوح الكود.

7. الملخص

• دمج TypeScript مع React يعزز جودة الكود ويساعد على تجنب الأخطاء عبر تعريف الأنواع.
• يمكنك تعريف الأنواع للـ props و state باستخدام interfaces أو types.
• TypeScript يوفر مزايا قوية مثل التحقق من الأنواع التلقائي ودعم التلميحات التلقائية في المحررات.
• الاستخدام الأمثل لـ TypeScript في React يمكن أن يساعد في تحسين قابلية صيانة التطبيقات الكبيرة والمعقدة.