TypeScript और React का परिचय

इस आर्टिकल में, हम TypeScript और React का उपयोग करके एक सरल मूवी लाइब्रेरी एप्लीकेशन बनाएंगे। हम TypeScript की मूल बातें कवर करेंगे, जिसमें टाइप्स, इंटरफेस और टाइप कॉन्स्ट्रेन्ट्स शामिल हैं, और उन्हें React एप्लीकेशन में कैसे लागू किया जाए।

प्रोजेक्ट सेट अप करना

शुरू करने के लिए, हम कमांड npm create react-app movie-library --template typescript का उपयोग करके एक नया React प्रोजेक्ट बनाते हैं। यह TypeScript कॉन्फ़िगरेशन के साथ एक बेसिक React प्रोजेक्ट सेट अप करता है।

TypeScript को समझना

TypeScript, JavaScript का एक सुपरसेट है जो डेवलपमेंट एक्सपीरियंस को बेहतर बनाने के लिए ऑप्शनल स्टैटिक टाइपिंग और अन्य फीचर्स जोड़ता है। यह कंपाइल-टाइम पर एरर्स को पकड़ने में मदद करता है, जिससे कोड को मेंटेन और रिफैक्टर करना आसान हो जाता है।

इंटरफेस बनाना

TypeScript में, इंटरफेस का उपयोग किसी ऑब्जेक्ट के आकार को परिभाषित करने के लिए किया जाता है। हम अपने मूवी ऑब्जेक्ट के लिए एक इंटरफेस बनाते हैं, जिसमें id, title, rating और genre जैसी प्रॉपर्टीज होती हैं।

interface Movie {
  id: number;
  title: string;
  rating: number;
  genre: string;
}

React कंपोनेंट्स में इंटरफेस का उपयोग करना

हम इन इंटरफेस का उपयोग अपने React कंपोनेंट्स में यह सुनिश्चित करने के लिए कर सकते हैं कि कंपोनेंट को पास की गई प्रोप्स अपेक्षित आकार के अनुरूप हों। उदाहरण के लिए, हमारे MovieCard कंपोनेंट में, हम Movie इंटरफेस का उपयोग करके प्रोप्स टाइप को परिभाषित कर सकते हैं।

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  // component implementation
};

सर्च फंक्शनैलिटी को लागू करना

सर्च फंक्शनैलिटी को लागू करने के लिए, हम एक SearchBar कंपोनेंट बनाते हैं जो एक query स्ट्रिंग को एक प्रोप के रूप में स्वीकार करता है। हम useState हुक का उपयोग क्वेरी को स्टोर करने और जब user सर्च बार में कुछ टाइप करता है तो इसे अपडेट करने के लिए करते हैं।

const SearchBar = () => {
  const [query, setQuery] = useState('');

  const handleSearch = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };

  return (
    <input type="search" value={query} onChange={handleSearch} />
  );
};

टाइप गार्ड का उपयोग करना

हम एक विशिष्ट स्कोप के भीतर एक वैल्यू के टाइप को सीमित करने के लिए टाइप गार्ड का उपयोग कर सकते हैं। उदाहरण के लिए, हम यह जांचने के लिए एक टाइप गार्ड बना सकते हैं कि कोई वैल्यू Movie ऑब्जेक्ट है या नहीं।

function isMovie<T>(value: T): value is Movie {
  return 'id' in value && 'title' in value && 'rating' in value && 'genre' in value;
}

निष्कर्ष

इस आर्टिकल में, हमने TypeScript की मूल बातें और React एप्लीकेशन में इसे कैसे लागू किया जाए, इस पर चर्चा की है। हमने सर्च फंक्शनैलिटी को भी लागू किया है और वैल्यू के टाइप को सीमित करने के लिए टाइप गार्ड का उपयोग किया है। TypeScript का उपयोग करके, हम अपने कोड को अधिक मेंटेन करने योग्य और सेल्फ-डॉक्यूमेंटिंग बना सकते हैं, और रनटाइम के बजाय कंपाइल-टाइम पर एरर्स को पकड़ सकते हैं।

Introduction to TypeScript and React