TypeScript में एसिंक्रोनस प्रोग्रामिंग: पूर्ण गाइड

TypeScript में एसिंक्रोनस प्रोग्रामिंग का परिचय

एसिंक्रोनस प्रोग्रामिंग कोड लिखने का एक तरीका है जिसमें समय लेने वाले ऑपरेशन (जैसे सर्वर अनुरोध, फ़ाइल पढ़ना, टाइमर) प्रोग्राम के मुख्य थ्रेड के निष्पादन को ब्लॉक नहीं करते हैं। आधुनिक वेब डेवलपमेंट में, एसिंक्रोनसिटी केवल सुविधा नहीं, बल्कि एक आवश्यकता है। JavaScript और TypeScript, एकल-थ्रेडेड भाषाएँ होने के कारण, एसिंक्रोनस ऑपरेशन को संसाधित करने के लिए इवेंट लूप (Event Loop) का उपयोग करते हैं।

TypeScript इस शक्तिशाली प्रतिमान में स्टैटिक टाइपिंग जोड़ता है, जिससे कोड अधिक पूर्वानुमानित और सुरक्षित हो जाता है। इस गाइड में, हम एसिंक्रोनस प्रोग्रामिंग के सभी पहलुओं को कवर करेंगे: क्लासिक कॉलबैक से लेकर पूर्ण टाइपिंग के साथ आधुनिक async/await तक।

एसिंक्रोनसिटी की मूल बातें: कॉलबैक से प्रॉमिस तक

कॉलबैक की समस्या और "कॉलबैक हेल"

शुरू में, JavaScript में एसिंक्रोनसिटी को कॉलबैक (कॉलबैक फ़ंक्शन) के माध्यम से कार्यान्वित किया गया था। हालाँकि, यह दृष्टिकोण जल्दी ही अपठनीय कोड की ओर ले गया:

function loadData(callback: (data: string) => void) {    setTimeout(() => {        callback("डेटा लोड हो गया");    }, 1000);}

loadData((data) => {    console.log(data);    // नेस्टेड कॉल    loadData((data2) => {        console.log(data2);    });});

ऐसे कोड को डीबग करना और बनाए रखना मुश्किल है। TypeScript नेस्टिंग की समस्या का समाधान नहीं करता है, लेकिन यह कॉलबैक पैरामीटर को टाइप करने में मदद करता है।

प्रॉमिस (Promise) — नर्क से मुक्ति

प्रॉमिस एक ऑब्जेक्ट है जो तीन अवस्थाओं में से एक में हो सकता है: pending (लंबित), fulfilled (सफलतापूर्वक पूर्ण), या rejected (त्रुटि के साथ अस्वीकृत)। TypeScript आपको प्रॉमिस द्वारा लौटाए जाने वाले डेटा के प्रकार को सख्ती से टाइप करने की अनुमति देता है:

function fetchUser(id: number): Promise<User> {    return new Promise((resolve, reject) => {        setTimeout(() => {            if (id > 0) {                resolve({ id, name: "इवान पेत्रोव" });            } else {                reject(new Error("गलत ID"));            }        }, 500);    });}

interface User {    id: number;    name: string;}

// उपयोगfetchUser(1).then(user => {    console.log(user.name); // TypeScript जानता है कि user एक User है}).catch(error => {    console.error(error.message);});

Promise<User> जेनेरिक के लिए धन्यवाद, TypeScript कंपाइलर गारंटी देता है कि .then() के अंदर हमें इसी प्रकार की एक ऑब्जेक्ट मिलेगी।

Async/Await: सुरुचिपूर्ण एसिंक्रोनसिटी

सिंटैक्स और टाइपिंग

async और await कीवर्ड आपको एसिंक्रोनस कोड लिखने की अनुमति देते हैं जो सिंक्रोनस दिखता है। async से चिह्नित फ़ंक्शन हमेशा एक प्रॉमिस लौटाता है:

async function getGreeting(name: string): Promise<string> {    return `नमस्ते, ${name}!`;}

// रिटर्न वैल्यू का प्रकार — Promise<string>const result: Promise<string> = getGreeting("दुनिया");

याद रखना महत्वपूर्ण है: यदि async फ़ंक्शन प्रॉमिस नहीं लौटाता है, तो TypeScript स्वचालित रूप से इसे प्रॉमिस में लपेट देता है।

वास्तविक लॉजिक के साथ उदाहरण

आइए एक सामान्य परिदृश्य पर विचार करें — API से डेटा प्राप्त करना और उसे संसाधित करना:

interface Post {    userId: number;    id: number;    title: string;    body: string;}

async function fetchPosts(userId: number): Promise<Post[]> {    const response = await fetch(`https://jsonplaceholder.typicode.com/posts?userId=${userId}`);    if (!response.ok) {        throw new Error(`HTTP त्रुटि: ${response.status}`);    }    const data: Post[] = await response.json();    return data;}

async function displayPosts() {    try {        const posts = await fetchPosts(1);        console.log(`${posts.length} पोस्ट प्राप्त हुए:`);        posts.forEach(post => console.log(`- ${post.title}`));
```