TypeScript Promise<T> : Async Programming In TypeScript In Hindi

If tutorials available on this website are helpful for you, please whitelist this website in your ad blocker😭 or Donate to help us ❤️ pay for the web hosting to keep the website running.

इन modern web development, asynchronous programming एक जरूरत ban चुका है। JavaScript में asynchronous operations को handle करने के लिए हम Promises का use करते हैं, और TypeScript में इस functionality को और भी strong और type-safe बनाया गया है Promise<T> के concept के through.

TypeScript के generic Promise<T> का use कर के हम asynchronous operations का result किस type का होगा, यह define कर सकते हैं।

इस blog में हम TypeScript Promise<T> को समझेंगे, कैसे Promise काम करता है, उसका syntax, और real-world examples के साथ इसको कैसे implement किया जाता है।

●●●

What are Promises ?

Promise एक JavaScript object है जो asynchronous operation के completion या failure का result represent करता है।

यह object 3 states में हो सकता है -

1. Pending : जब तक asynchronous operation complete नहीं होता।

2. Fulfilled : जब asynchronous operation successfully complete हो जाता है।

3. Rejected : जब asynchronous operation fail हो जाता है।

Promises का use करके हम asynchronous operations को handle करते हैं बिना callback hell में फंसे। TypeScript में, Promise<T> को use कर के हम define कर सकते हैं कि जो asynchronous operation return करेगा, वो किस type का होगा।

●●●

Promise<T> Syntax In TypeScript

TypeScript में, Promise<T> एक generic type होता है जिसमे T specify करता है कि जो result आएगा वो किस type का होगा।

अगर आपको promise से string return करनी हो, तो आप Promise<string> का use करते हैं, और अगर number return करना हो तो Promise<number> का use होता है।

let promise: Promise<T> = new Promise((resolve, reject) => {
    // Asynchronous operation
});

TypeScript Promise Example

अब एक real-world example देखते हैं, जिसमे हम एक asynchronous function बनाते हैं जो API से data fetch करता है और Promise<T> का use करता है तो type-safe data handling करे।

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

// Function that returns a Promise
function fetchUserData(userId: number): Promise<User> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            if (userId === 1) {
                resolve({
                    id: 1,
                    name: "John Doe",
                    email: "john.doe@example.com"
                });
            } else {
                reject("User not found");
            }
        }, 2000);
    });
}

// Using the Promise with TypeScript
fetchUserData(1)
    .then((user: User) => {
        console.log(`User fetched: ${user.name}`);
    })
    .catch((error) => {
        console.error("Error:", error);
    });

Explanation

• fetchUserData() एक function है जो asynchronous operation करता है (यहाँ हम setTimeout use कर रहे हैं API call simulate करने के लिए) .

• यह function Promise<User> return करता है, मतलब यह promise जब resolve होगा, तो User type का object return करेगा।

• .then() block का use हम result को handle करने के लिए करते हैं जब promise fulfill होता है, और .catch() block का use error handling के लिए किया जाता है जब promise reject होता है।

●●●

TypeScript Promise Chain

कभी-कभी हमें एक के बाद एक asynchronous operations को perform करना होता है , ऐसे case में promise chaining का use होता है।

Copy
function fetchUserDetails(userId: number): Promise<User> {
    return fetchUserData(userId)
        .then((user: User) => {
            console.log(`User: ${user.name}`);
            return user;  // Returning user for the next .then() call
        })
        .then((user: User) => {
            console.log(`Email: ${user.email}`);
            return user;  // Continue chaining if needed
        })
        .catch((error) => {
            console.error("Error fetching user details:", error);
        });
}

fetchUserDetails(1);

Explanation

• हमने एक promise chain बनाई है जिसमे multiple .then() blocks का use किया गया है तो एक के बाद एक asynchronous operations को perform कर सकें।

• अगर कोई error आती है, तो catch block उस error को handle करता है।

●●●

Generics with Promise<T> In TypeScript

आप TypeScript में generics के through Promise<T> को और flexible बना सकते हैं। आप एक generic function बना सकते हैं जो किसी भी type के साथ काम करे।

Copy
// Generic function that returns a Promise of any type
function fetchData<T>(url: string): Promise<T> {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data: T = JSON.parse('{}');  // Simulating API response
            resolve(data);
        }, 1000);
    });
}

// Using the generic function
interface Product {
    id: number;
    name: string;
    price: number;
}

fetchData<Product>("api/products/1")
    .then((product: Product) => {
        console.log(`Product Name: ${product.name}, Price: ${product.price}`);
    })
    .catch((error) => {
        console.error("Error fetching product data:", error);
    });

Explanation

• fetchData<T> एक generic function है जो किसी भी type के data को fetch कर सकता है।

• हमने Product interface के साथ इस function को use किया, जो ensure करता है कि Promise<T> का type Product होगा।

●●●

Handling Multiple Promises with Promise.all()

कभी-कभी हमें एक से ज़्यादा asynchronous operations को parallel में perform करना होता है और सबके result का wait करना होता है। TypeScript में हम Promise.all() का use कर सकते हैं जो एक array of promises को handle करता है।

Copy
function fetchProduct(productId: number): Promise<Product> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ id: productId, name: `Product ${productId}`, price: 100 });
        }, 1000);
    });
}

function fetchCategory(categoryId: number): Promise<string> {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(`Category ${categoryId}`);
        }, 1500);
    });
}

// Using Promise.all to handle multiple promises
Promise.all([fetchProduct(1), fetchCategory(2)])
    .then(([product, category]) => {
        console.log(`Product: ${product.name}, Category: ${category}`);
    })
    .catch((error) => {
        console.error("Error:", error);
    });

Explanation

• Promise.all() एक array of promises को accept करता है और सब promises के resolve hone का wait करता है।

• अगर कोई promise reject होता है, तो catch block सभी errors को handle करता है।

●●●

Common Mistakes with Promises

• Forgetting Return Promises In .then() : अगर आप .then() block में एक promise return नहीं करते, तो आप promise chaining का advantage नहीं ले पाएंगे।

• Not Handling Rejections Properly : Promise rejections को हमेशा handle करना चाहिए, नहीं तो uncaught promise rejections आपके application में bugs introduce कर सकती हैं।

• Mixing Callbacks with Promises : Promise-based code में callbacks use करना आपके code को complex बना सकता है, इसलिए asynchronous code में सिर्फ promises या async/await का use करना चाहिए।

Conclusion

TypeScript Promise<T> asynchronous programming को ज़्यादा type-safe और reliable बनाता है। इसका use कर के आप ensure कर सकते हैं कि asynchronous operations जो result देंगे वो किस type का होगा।

async/await, promise chaining, और Promise.all() जैसे tools का use कर के आप complex asynchronous flows को efficiently handle कर सकते हैं।