TypeScript में एसिंक्रोनस प्रोग्रामिंग: शुरुआती लोगों के लिए पूर्ण गाइड

TypeScript में एसिंक्रोनस प्रोग्रामिंग: शुरुआती लोगों के लिए पूर्ण गाइड

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

एसिंक्रोनस प्रोग्रामिंग क्या है और इसकी आवश्यकता क्यों है?

सिंक्रोनस प्रोग्रामिंग में, कोड सख्ती से क्रमिक रूप से निष्पादित होता है: प्रत्येक अगला ऑपरेशन पिछले ऑपरेशन के पूरा होने की प्रतीक्षा करता है। यह लंबे कार्यों, जैसे सर्वर अनुरोध, फ़ाइल पढ़ना या टाइमर के साथ काम करते समय समस्याएँ पैदा करता है। एसिंक्रोनस प्रोग्रामिंग आपको ऐसे कार्यों को बैकग्राउंड में करने की अनुमति देता है, मुख्य निष्पादन थ्रेड को ब्लॉक किए बिना।

TypeScript एसिंक्रोनस JavaScript में सख्त टाइपिंग जोड़ता है, जो कंपाइलेशन चरण में त्रुटियों को पकड़ने में मदद करता है। उदाहरण के लिए, टाइप किए गए Promise आपको सटीक रूप से जानने देते हैं कि एसिंक्रोनस फ़ंक्शन किस प्रकार का डेटा लौटाएगा।

// सिंक्रोनस कोड - निष्पादन को ब्लॉक करता हैfunction fetchData(): string {  // लंबा ऑपरेशन  return "डेटा";}

// एसिंक्रोनस कोड - ब्लॉक नहीं करताasync function fetchDataAsync(): Promise<string> {  const response = await fetch('/api/data');  return response.json();}

मूल बातें: Callback, Promise और Async/Await

ऐतिहासिक रूप से, JavaScript में एसिंक्रोनसिटी callback-फ़ंक्शन से शुरू हुई, जो तर्क के रूप में पारित किए जाते थे। हालांकि, इस दृष्टिकोण ने "कॉलबैक नरक" को जन्म दिया — गहराई से नेस्टेड संरचनाएं जो समझने और डीबग करने में कठिन होती हैं।

Promises (प्रॉमिसेस) ने इस समस्या को चेन सिंटैक्स प्रदान करके हल किया। Promise एक ऑब्जेक्ट है जो एसिंक्रोनस ऑपरेशन के परिणाम का प्रतिनिधित्व करता है, जो तीन अवस्थाओं में से एक में हो सकता है: pending (प्रतीक्षा), fulfilled (पूर्ण) या rejected (अस्वीकृत)।

// TypeScript में Promise का उदाहरणfunction loadUser(id: number): Promise<User> {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (id > 0) {        resolve({ id, name: "एलिस" });      } else {        reject(new Error("अमान्य उपयोगकर्ता ID"));      }    }, 1000);  });}

// उपयोगloadUser(1)  .then(user => console.log(user))  .catch(error => console.error(error));

Async/Await Promises के ऊपर एक सिंटैक्टिक शुगर है, जो एसिंक्रोनस कोड को सिंक्रोनस जैसा बनाता है। फ़ंक्शन से पहले कीवर्ड async इंगित करता है कि यह एक Promise लौटाता है, और await परिणाम प्राप्त होने तक निष्पादन को रोकता है।

// TypeScript में Async/Awaitasync function getUserData(): Promise<void> {  try {    const user = await loadUser(1);    console.log(user.name); // "एलिस"  } catch (error) {    console.error("लोड करने में त्रुटि:", error);  }}

getUserData();

TypeScript में एसिंक्रोनस फ़ंक्शन की टाइपिंग

TypeScript का एक मुख्य लाभ सख्त टाइपिंग है। एसिंक्रोनस फ़ंक्शन के लिए लौटाए गए Promise के प्रकार को सही ढंग से निर्दिष्ट करना महत्वपूर्ण है। यदि फ़ंक्शन एक स्ट्रिंग लौटाता है, तो प्रकार Promise<string> होगा। TypeScript कंपाइलर जाँच करेगा कि आप परिणाम प्राप्त करने से पहले उसका उपयोग करने का प्रयास नहीं कर रहे हैं।

टाइप किए गए API अनुरोध के साथ एक उदाहरण देखें:

interface Todo {  userId: number;  id: number;  title: string;  completed: boolean;}

async function fetchTodo(id: number): Promise<Todo> {  const response = await fetch(`https://jsonplaceholder.typicode.com/todos/${id}`);  if (!response.ok) {    throw new Error(`HTTP त्रुटि! स्थिति: ${response.status}`);  }  return await response.json() as Todo;}

// टाइपिंग के साथ उपयोगasync function displayTodo(): Promise<void> {  const todo = await fetchTodo