टाइपस्क्रिप्ट के साथ रिएक्ट चरण-दर-चरण एकीकरण गाइड

React के साथ TypeScript को एकीकृत करने से स्टैटिक टाइप चेकिंग और बेहतर टूलिंग सहायता प्रदान करके विकास अनुभव में वृद्धि होती है। यह गाइड स्क्रैच से React प्रोजेक्ट में TypeScript को सेट अप करने की प्रक्रिया के बारे में बताता है।

आवश्यक शर्तें

सुनिश्चित करें कि सिस्टम पर Node.js और npm (Node Package Manager) इंस्टॉल हैं। प्रोजेक्ट निर्भरता और स्क्रिप्ट को प्रबंधित करने के लिए इन उपकरणों की आवश्यकता होती है।

TypeScript के साथ एक नया React प्रोजेक्ट बनाना

TypeScript के साथ एक नया React प्रोजेक्ट शुरू करने का सबसे आसान तरीका Create React App with TypeScript टेम्पलेट का उपयोग करना है। इन चरणों का पालन करें:

1. नया प्रोजेक्ट बनाएं: TypeScript समर्थन के साथ नया React प्रोजेक्ट बनाने के लिए Create React App का उपयोग करें।

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

यह कमांड TypeScript कॉन्फ़िगरेशन के साथ my-app नामक एक नया React प्रोजेक्ट सेट करता है।

टाइपस्क्रिप्ट कॉन्फ़िगरेशन को समझना

बनाए गए प्रोजेक्ट में एक tsconfig.json फ़ाइल शामिल है, जिसमें टाइपस्क्रिप्ट कंपाइलर विकल्प और प्रोजेक्ट सेटिंग शामिल हैं। यहाँ एक नमूना कॉन्फ़िगरेशन है:

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

टाइपस्क्रिप्ट घटक लिखना

टाइप सुरक्षा सुनिश्चित करने के लिए 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 प्रकार का उपयोग बच्चों और प्रकार जाँच वाले कार्यात्मक घटकों के लिए किया जाता है।

परियोजना चलाना

टाइपस्क्रिप्ट सेट अप करने और घटक लिखने के बाद, प्रोजेक्ट को निम्नलिखित npm स्क्रिप्ट का उपयोग करके चलाया जा सकता है:

npm start

यह कमांड डेवलपमेंट सर्वर को शुरू करता है और डिफ़ॉल्ट वेब ब्राउज़र में रिएक्ट एप्लिकेशन को खोलता है।

अतिरिक्त सुझाव

• प्रकार परिभाषाएँ: तृतीय-पक्ष लाइब्रेरीज़ के लिए, npm का उपयोग करके प्रकार परिभाषाएँ स्थापित करें। उदाहरण के लिए, npm install @types/react @types/react-dom --save-dev React और ReactDOM के लिए प्रकार प्रदान करता है।
• Redux के साथ TypeScript का उपयोग करना: Redux को TypeScript के साथ उपयोग करते समय, बेहतर प्रकार सुरक्षा और स्वतः पूर्णता के लिए क्रियाओं, रिड्यूसर और स्टोर को टाइप करना सुनिश्चित करें।

निष्कर्ष

टाइपस्क्रिप्ट को रिएक्ट के साथ एकीकृत करने से टाइप सुरक्षा और बेहतर कोड रखरखाव प्रदान करके विकास को बढ़ावा मिलता है। इस गाइड में बताए गए चरणों का पालन करके, टाइपस्क्रिप्ट के साथ एक रिएक्ट प्रोजेक्ट को प्रभावी ढंग से सेट किया जा सकता है, जिससे डेवलपर्स को मजबूत और स्केलेबल एप्लिकेशन बनाने के लिए टाइपस्क्रिप्ट की सुविधाओं का लाभ उठाने की अनुमति मिलती है।