TypeScript के साथ React का उपयोग

React के साथ TypeScript उपयोग करना आपकी move की हर box पर exactly लिखने जैसा है कि अंदर क्या है, ताकि कोई accidentally kitchen वाला box न खोले यह expect करते हुए कि उसमें bathroom supplies हैं।

In this page:

Component Props को Type करना
useState को Type करना
Event Handlers को Type करना

Syntax

markup

interface ComponentProps {
  name: string;
  count?: number;
}

function Component({ name, count = 0 }: ComponentProps) {
  const [value, setValue] = useState<string>("");
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.target.value);
  return <input value={value} onChange={handleChange} />;
}

Component Props को Type करना

एक interface (या type alias) define करना जो किसी component की expected props describe करे, फिर उसे props parameter के type के रूप में उपयोग करना, TypeScript को एक missing required prop या wrong type की value जैसी mistakes को compile time पर, code run होने से पहले ही पकड़ने देता है।

Note: Props interface का नाम component के बाद एक Props suffix के साथ रखें, जैसे एक Greeting component के लिए GreetingProps।

Warning: Props को any type करना (या types को पूरी तरह skip करना) उस component के लिए TypeScript का सारा benefit छोड़ देता है — यह essentially plain JavaScript जैसा वापस हो जाता है।

उदाहरण: Typing Component Props

markup

// Run in your local React project (npm install required)
interface GreetingProps {
  name: string;
  age?: number; // optional
}
function Greeting({ name, age }: GreetingProps) {
  return <p>Hello, {name}{age ? ` (${age})` : ''}</p>;
}

useState को Type करना

TypeScript आमतौर पर एक useState hook का type उसकी initial value से automatically infer करता है, जैसे useState(0) number के रूप में infer होता है। जब initial value intended type को पूरी तरह capture नहीं करती (जैसे एक empty array जो बाद में strings रखेगा), आप explicitly एक generic के साथ type specify करते हैं।

Note: useState<string[]>([]) एक common pattern है — TypeScript एक empty array से अकेले 'strings का array' infer नहीं कर सकता।

Warning: बिना explicit generic के, useState([]) type को never[] infer करता है, जो फिर आप बाद में add करने की कोशिश करने वाले किसी भी actual items को reject करता है।

उदाहरण: Typing useState

markup

// Run in your local React project (npm install required)
function TodoList() {
  const [todos, setTodos] = useState<string[]>([]);
  const addTodo = (text: string) => setTodos([...todos, text]);
  return <button onClick={() => addTodo('New task')}>Add ({todos.length})</button>;
}

Event Handlers को Type करना

React के built-in TypeScript types में specific event types शामिल हैं, जैसे एक input के onChange handler के लिए React.ChangeEvent<HTMLInputElement>, आपको event.target.value जैसी properties पर correct autocomplete और type-checking देते हुए।

Note: अपने editor के autocomplete को किसी given JSX event prop के लिए exact event type suggest करने दें — आपको शायद ही कभी इन सभी को याद रखना पड़े।

Warning: एक generic any या गलत specific event type (जैसे एक button का event type एक input पर उपयोग करना) real type errors hide कर सकता है जो related हैं कि वह event पर actually कौन सी properties मौजूद हैं।

उदाहरण: Typing Event Handlers

markup

// Run in your local React project (npm install required)
function SearchBox() {
  const [query, setQuery] = useState('');
  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setQuery(e.target.value);
  };
  return <input value={query} onChange={handleChange} />;
}

Chapter Quiz — Complete all 14 topics to unlock

0/14 topics done

Complete these topics first:

← Previous Lesson Introduction to Next.js (server-side React) Next Lesson → Scalable Folder Architecture

TypeScript के साथ React का उपयोग

Component Props को Type करना

useState को Type करना

Event Handlers को Type करना

Chapter Quiz — Complete all 14 topics to unlock

Login to run this code