How to Call Promise Function in Typescript

Q: 1. How to type a function returning a Promise?

function fetchData ( ) : Promise < string > { ... }

Q: 2. Why does catch(e) show unknown in TypeScript?

TypeScript 4.4+ defaults to unknown for safety. Use type guards!

In modern JavaScript and TypeScript development, Promises play a vital role in handling asynchronous operations. Whether you’re fetching data from an API or reading files asynchronously, promises make your code more manageable and readable. In this blog, we’ll break down how to call promise function in TypeScript with detailed explanations, best practices, examples, and even flowcharts to make it crystal clear.

“Promises in TypeScript aren’t just about .then() and await—they’re a gateway to type-safe asynchronous code. This guide covers everything from basic calls to advanced concurrency patterns, with real-world examples and TypeScript-specific best practices.”

What Is a Promise? (TypeScript vs. JavaScript)

A Promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value.

				
					const myPromise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

This promise will resolve after 2 seconds. We can call it using .then() or async/await.

Feature	JavaScript Promise	TypeScript Promise
Type Annotations	Not available	Promise<User[]>
Error Handling	Untyped catch	Typed catch(e: Error)

Why Use Promises in TypeScript?

TypeScript enhances promises by allowing:

Type safety: Define what type of data the promise resolves to.
Better tooling: Autocomplete and compile-time checks.
Improved readability with async/await.

How to Call Promise Function in TypeScript – The Basics

Let’s define a function that returns a promise:

				
					function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("Hello from the Promise!");
    }, 1000);
  });
}

✅Calling it with .then()

				
					fetchData().then((message) => {
  console.log(message); // Output: Hello from the Promise!
});

This is the most basic way to call a promise function in TypeScript.

✅Using async/await for Better Readability

Using async/await is the modern and cleaner way to handle promises:

				
					async function callFetchData() {
  const message = await fetchData();
  console.log(message);
}

Here’s what’s happening:

await waits for the fetchData() promise to resolve.
Execution is paused until the value is returned.

Advanced Patterns

a) Chaining with Typed Results

				
					fetchUser()
  .then((user: User) => fetchOrders(user.id)) // Chain with type inference
  .then((orders: Order[]) => console.log(orders));

b) Promise.allSettled (Partial Success)

				
					const results = await Promise.allSettled([fetchA(), fetchB()]);
const successes = results.filter(r => r.status === 'fulfilled');

Handling Errors Gracefully

Always handle errors when working with promises.

With .catch():

				
					fetchData()
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error("Error:", error);
  });

With try/catch in async functions:

				
					async function callFetchDataSafely() {
  try {
    const message = await fetchData();
    console.log(message);
  } catch (error) {
    console.error("Caught error:", error);
  }
}

TypeScript-Specific Errors

				
					try { await fetchData(); } 
catch (e: unknown) { // TypeScript 4.4+ 
  if (e instanceof Error) console.error(e.message); // Type guard
}

Chaining Promises with .then() and .catch()

You can chain multiple .then() methods for sequential logic.

				
					fetchData()
  .then((res) => {
    console.log("First:", res);
    return "Second step";
  })
  .then((res2) => {
    console.log("Second:", res2);
  })
  .catch((error) => {
    console.error("Chain Error:", error);
  });

Real-world Examples

Example 1: API Call with Fetch

Let’s simulate an API call.

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

function getUser(): Promise<User> {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ id: 1, name: "Alice" });
    }, 1500);
  });
}

async function displayUser() {
  const user = await getUser();
  console.log(`User: ${user.name}`);
}

Example 2: File I/O (Node.js)

				
					import { promises as fs } from 'fs';

async function readConfig(): Promise<Config> {
  const data = await fs.readFile('config.json', 'utf8');
  return JSON.parse(data) as Config;
}

✅This is a practical demonstration of how to call promise function in TypeScript using async/await.

Below is a flowchart that visualizes the execution of a promise function:

Best Practices in Asynchronous Programming in TypeScript

✅ Always use type annotations with promises for better clarity.
✅ Prefer async/await over chaining .then() for cleaner code.
✅ Wrap your await calls in try/catch to handle unexpected errors.
✅ Avoid mixing await and .then() unless absolutely necessary.
✅ Don’t forget to return your promises in async functions.

Conclusion

Understanding how to call promise function in TypeScript is essential for any modern developer. With async/await, error handling, and proper typings, TypeScript offers a robust environment for handling asynchronous code cleanly and safely.

Whether you’re working on frontend apps using React or backend services in Node.js, mastering promise functions will greatly improve your development efficiency and code quality.

Task	Code Example	TypeScript Advantage
Basic Promise	Promise<string>	Explicit return types
Error Handling	catch(e: unknown)	Safer than any
Concurrency	Promise.all([fetchA(), fetchB()])	Typed array destructuring

💡 Want to master TypeScript further? Try converting all your callback functions to promise-based functions and see the improvement in readability and maintainability!

Frequently Asked Questions

1. How to type a function returning a Promise?

function fetchData(): Promise<string> { ... }

2. Why does catch(e) show unknown in TypeScript?

TypeScript 4.4+ defaults to unknown for safety. Use type guards!