TypeScript और React का परिचय

इस लेख में, हम एक साधारण मूवी लाइब्रेरी एप्लिकेशन बनाकर TypeScript और React की मूल बातें जानेंगे। हम TypeScript की स्थापना, एक नई परियोजना स्थापित करने और components, interfaces और types बनाने को कवर करेंगे।

TypeScript और React के साथ शुरुआत करना

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

TypeScript की मूल बातें समझना

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

TypeScript की प्रमुख विशेषताओं में से एक interfaces को परिभाषित करने की क्षमता है, जिनका उपयोग वस्तुओं के आकार को परिभाषित करने के लिए किया जाता है। हम अपने डेटा की संरचना को परिभाषित करने, इसके साथ काम करना आसान बनाने और त्रुटियों को कम करने के लिए interfaces का उपयोग कर सकते हैं।

Interfaces बनाना

Interfaces कैसे काम करते हैं, यह प्रदर्शित करने के लिए, आइए एक मूवी ऑब्जेक्ट के लिए एक सरल interface बनाएँ। हम Movie नामक एक interface को id, title, rating, genre और image गुणों के साथ परिभाषित करेंगे।

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

React Components में Interfaces का उपयोग करना

अब जब हमारे पास अपना Movie interface है, तो हम इसका उपयोग React component के props को परिभाषित करने के लिए कर सकते हैं। चलो एक MovieCard component बनाते हैं जो Movie type का movie prop स्वीकार करता है।

import React from 'react';

interface MovieCardProps {
  movie: Movie;
}

const MovieCard: React.FC<MovieCardProps> = ({ movie }) => {
  return (
    <div>
      <h2>{movie.title}</h2>
      <p>Rating: {movie.rating}</p>
      <p>Genre: {movie.genre}</p>
      <img src={movie.image} alt={movie.title} />
    </div>
  );
};

export default MovieCard;

React.FC का उपयोग करना

ऊपर दिए गए उदाहरण में, हमने MovieCard component को परिभाषित करने के लिए React.FC type का उपयोग किया। यह एक जेनेरिक type है जो एक कार्यात्मक घटक का प्रतिनिधित्व करता है। FC का मतलब "फंक्शन component" है।

एक सर्च बार बनाना

अगला, आइए एक search bar component बनाएँ जो उपयोगकर्ताओं को title या genre के आधार पर फिल्मों को खोजने की अनुमति देता है। हम search bar props के लिए एक interface को परिभाषित करेंगे और एक नया component बनाएँ जो इस prop को स्वीकार करता है।

interface SearchBarProps {
  onSearch: (query: string) => void;
}

const SearchBar: React.FC<SearchBarProps> = ({ onSearch }) => {
  const [query, setQuery] = useState('');

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

  return (
    <input
      type="text"
      value={query}
      onChange={handleSearch}
      placeholder="Search for movies"
    />
  );
};

इवेंट्स को हैंडल करना

Search bar component में, हमने handleSearch फंक्शन का उपयोग करके इनपुट फ़ील्ड के onChange इवेंट को संभाला। यह फ़ंक्शन query स्टेट को अपडेट करता है और नए क्वेरी मान के साथ onSearch prop को कॉल करता है।

इवेंट टाइप्स का उपयोग करना

TypeScript कई तरह के इवेंट टाइप प्रदान करता है जिनका उपयोग हम अपने इवेंट हैंडलर्स को टाइप करने के लिए कर सकते हैं। उदाहरण के लिए, हमने handleSearch फ़ंक्शन को टाइप करने के लिए React.ChangeEvent<HTMLInputElement> type का उपयोग किया।

एक सॉर्ट फंक्शन बनाना

आइए एक सॉर्ट फंक्शन बनाएँ जो फिल्मों को title, rating या genre के आधार पर सॉर्ट करता है। हम सॉर्ट विकल्पों के लिए एक interface को परिभाषित करेंगे और एक नया फ़ंक्शन बनाएँ जो इस prop को स्वीकार करता है।

interface SortOptions {
  sort: string;
}

const sortMovies = (movies: Movie[], sort: SortOptions) => {
  switch (sort.sort) {
    case 'title':
      return movies.sort((a, b) => a.title.localeCompare(b.title));
    case 'rating':
      return movies.sort((a, b) => a.rating - b.rating);
    default:
      return movies;
  }
};

निष्कर्ष

इस लेख में, हमने एक साधारण मूवी लाइब्रेरी एप्लिकेशन बनाकर TypeScript और React की मूल बातें जानीं। हमने interfaces, components और types बनाए, और उनका उपयोग अपने डेटा और props की संरचना को परिभाषित करने के लिए किया। हमने इवेंट्स को भी संभाला और अपने इवेंट हैंडलर्स को टाइप करने के लिए इवेंट टाइप्स का उपयोग किया। इसके अतिरिक्त, हमने एक सॉर्ट फ़ंक्शन बनाया जो फिल्मों को title, rating या genre के आधार पर सॉर्ट करता है।

Introduction to TypeScript and React

What is TypeScript?

Creating Interfaces

Using Interfaces in React Components

Creating a Search Bar

Handling Events

Using Event Types

यह लेख मजबूत और रखरखाव योग्य अनुप्रयोगों के निर्माण में TypeScript की शक्ति का प्रदर्शन करता है। Interfaces, components और types का उपयोग करके, हम यह सुनिश्चित कर सकते हैं कि हमारा कोड अच्छी तरह से संरचित और समझने में आसान हो। इसके अतिरिक्त, इवेंट्स को संभालने और इवेंट टाइप्स का उपयोग करने से हमें अधिक कुशल और प्रभावी कोड लिखने में मदद मिल सकती है।