دليل التكامل خطوة بخطوة بين TypeScript وReact

يعمل دمج TypeScript مع React على تحسين تجربة التطوير من خلال توفير فحص النوع الثابت ودعم أفضل للأدوات. يوضح هذا الدليل عملية إعداد TypeScript في مشروع React من البداية.

المتطلبات الأساسية

تأكد من تثبيت Node.js وnpm (Node Package Manager) على النظام. هذه الأدوات مطلوبة لإدارة تبعيات المشروع والبرامج النصية.

إنشاء مشروع React جديد باستخدام TypeScript

الطريقة الأسهل لبدء مشروع React جديد باستخدام TypeScript هي استخدام قالب Create React App with TypeScript. اتبع الخطوات التالية:

إنشاء مشروع جديد: استخدم Create React App لإنشاء مشروع React جديد مع دعم TypeScript.

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

يقوم هذا الأمر بإعداد مشروع React جديد يسمى my-app مع تكوين TypeScript جاهزًا.

فهم تكوين TypeScript

يتضمن المشروع الذي تم إنشاؤه ملف tsconfig.json ، والذي يحتوي على خيارات مُجمِّع TypeScript وإعدادات المشروع. فيما يلي نموذج للتكوين:

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "jsx": "react",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["src"]
}

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

يمكن كتابة مكونات React باستخدام TypeScript لضمان سلامة النوع. فيما يلي مثال لمكون وظيفي باستخدام TypeScript:

import React from 'react';

interface Props {
  name: string;
  age?: number;
}

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

export default Greeting;

في هذا المثال، تحدد واجهة Props أنواع Props الخاصة بالمكون. يتم استخدام نوع React.FC للمكونات الوظيفية ذات العناصر الفرعية والتحقق من النوع.

تشغيل المشروع

بعد إعداد TypeScript وكتابة المكونات، يمكن تشغيل المشروع باستخدام البرنامج النصي npm التالي:

npm start

يقوم هذا الأمر ببدء تشغيل خادم التطوير ويفتح تطبيق React في متصفح الويب الافتراضي.

نصائح إضافية

تعريفات النوع: بالنسبة للمكتبات التابعة لجهات خارجية، قم بتثبيت تعريفات النوع باستخدام npm. على سبيل المثال، يوفر الأمر npm install @types/react @types/react-dom --save-dev أنواعًا لـ React وReactDOM.
استخدام TypeScript مع Redux: عند استخدام Redux مع TypeScript، تأكد من استخدام إجراءات النوع والمختصرات والتخزين لتحقيق أمان أفضل للنوع والإكمال التلقائي.

خاتمة

يعمل دمج TypeScript مع React على تحسين التطوير من خلال توفير أمان النوع وإمكانية صيانة أفضل للكود. باتباع الخطوات الموضحة في هذا الدليل، يمكن إعداد مشروع React باستخدام TypeScript بشكل فعال، مما يسمح للمطورين بالاستفادة من ميزات TypeScript لبناء تطبيقات قوية وقابلة للتطوير.

TypeScript React إعداد تكوين مكونات أنواع دعائم واجهة تطوير JSX TypeScript-config تبعيات واجهات تطوير-خدمة