TypeScript עם React מדריך שילוב שלב אחר שלב

שילוב TypeScript עם React משפר את חווית הפיתוח על ידי מתן בדיקת סוג סטטי ותמיכה טובה יותר בכלים. מדריך זה עובר על תהליך הגדרת TypeScript בפרויקט React מאפס.

דרישות מוקדמות

ודא ש-Node.js ו-npm (מנהל חבילות צומת) מותקנים במערכת. כלים אלו נדרשים לניהול תלות ותסריטים בפרויקט.

יצירת פרויקט React חדש עם TypeScript

הדרך הקלה ביותר להתחיל פרויקט React חדש עם TypeScript היא להשתמש ב- Create React App עם תבנית TypeScript. בצע את השלבים הבאים:

1. צור פרויקט חדש: השתמש ב- 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 מגדיר את הסוגים עבור האביזרים של הרכיב. סוג 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 לבניית יישומים חזקים וניתנים להרחבה.