TypeScript Async Programming

Promises in TypeScript

Promise < T >

Key Points:

Promise < T >

Promise < void >

- For Promises that don't return a value

Promise < never >

Basic Promise Example

// Create a typed Promise that resolves to a string const fetchGreeting = (): Promise < string > => {

return new Promise((resolve, reject) => {
setTimeout(() => {
const success = Math.random() > 0.5;
if (success) {
resolve("Hello, TypeScript!");
} else {
reject(new Error("Failed to fetch greeting"));
}
}, 1000);
});
};
// Using the Promise with proper type inference fetchGreeting().then((greeting) => {
// TypeScript knows 'greeting' is a string console.log(greeting.toUpperCase());
}).catch((error: Error) => {
console.error("Error:", error.message);
});

Promise States and Type Flow

Promise State Flow:

The type parameter in

Promise < T >

Async/Await with TypeScript

Key Benefits of Async/Await

Readability

Error Handling

: Use try/catch for both sync and async errors

Debugging

: Easier to debug with synchronous - like stack traces

Type Safety

Basic Async/Await Example

// Define types for our API response interface User {
id: number;
name: string;
email: string;
role: 'admin' | 'user' | 'guest';
}

// Function that returns a Promise of User array async function fetchUsers(): Promise < User[]> {

console.log('Fetching users...');
// Simulate API call await new Promise(resolve => setTimeout(resolve, 1000));
return [
{ id: 1, name: 'Alice', email: 'alice@example.com', role: 'admin' },
{ id: 2, name: 'Bob', email: 'bob@example.com', role: 'user' }
];
}
// Async function to process users async function processUsers() {
try {
// TypeScript knows users is User[]
const users = await fetchUsers();
console.log(`Fetched ${users.length} users`);
// Type-safe property access const adminEmails = users.filter(user => user.role === 'admin').map(user => user.email);
console.log('Admin emails:', adminEmails);
return users;
} catch (error) {
if (error instanceof Error) {
console.error('Failed to process users:', error.message);
} else {
console.error('An unknown error occurred');
}
throw error; // Re-throw to let caller handle
}
}
// Execute the async function processUsers().then(users => console.log('Processing complete')).catch(err => console.error('Processing failed:', err));

Async Function Return Types

All async functions in TypeScript return a Promise.

async function getString(): string { }        // Error: must return Promise async function getString(): Promise<string> { } // Correct

interface Product {
id: number;
name: string;
price: number;
}
async function fetchProduct(id: number): Promise<Product> {
console.log(`Fetching product ${id}...`);
await new Promise(resolve => setTimeout(resolve, Math.random() * 1000));
return { id, name: `Product ${id}`, price: Math.floor(Math.random() * 100) };
}
async function fetchMultipleProducts() {
try {
// Start all fetches in parallel const [product1, product2, product3] = await Promise.all([
fetchProduct(1), fetchProduct(2), fetchProduct(3)
]);
const total = [product1, product2, product3].reduce((sum, product) => sum + product.price, 0);
console.log(`Total price: $${total.toFixed(2)}`);
} catch (error) {
console.error('Error fetching products:', error);
}
}
fetchMultipleProducts();

Note:

All async functions in TypeScript return a Promise.
The type parameter of the Promise corresponds to the return type you declare after the Promise keyword.

Typing Callbacks for Async Operations

For traditional callback - based asynchronous code, TypeScript helps ensure proper typing of the callback parameters:

Example

// Define a type for the callback type FetchCallback = (error: Error | null, data?: string) => void;

// Simulate async operation setTimeout(() => {
try {
// Simulate successful response callback(null, "Response data");
} catch (error) {
callback(error instanceof Error ? error : new Error('Unknown error'));
}
}, 1000);
}
// Using the callback function fetchDataWithCallback('https://api.example.com', (error, data) => {
if (error) {
console.error('Error:', error.message);
return;
}
// TypeScript knows data is a string (or undefined)
if (data) {
console.log(data.toUpperCase());
}
});

Promise Combinations

These methods help you manage concurrent operations and handle their results in a type - safe way.

Promise Combination Methods

Promise.all - Parallel Execution

// Different types of promises const fetchUser = (id: number): Promise <{ id: number; name: string }> =>

const fetchPosts = (userId: number): Promise<Array<{ id: number; title: string }>> =>
Promise.resolve([
    { id: 1, title: 'Post 1' },
{ id: 2, title: 'Post 2' }
]);
const fetchStats = (userId: number): Promise<{ views: number; likes: number }> =>
Promise.resolve({ views: 100, likes: 25 });
// Run all in parallel async function loadUserDashboard(userId: number) {
try {
const [user, posts, stats] = await Promise.all([
fetchUser(userId), fetchPosts(userId), fetchStats(userId)
]);
// TypeScript knows the types of user, posts, and stats console.log(`User: ${user.name}`);
console.log(`Posts: ${posts.length}`);
console.log(`Likes: ${stats.likes}`);
return { user, posts, stats };
} catch (error) {
console.error('Failed to load dashboard:', error);
throw error;
}
}

loadUserDashboard(1);

Promise.race - First to Settle

// Helper function for timeout const timeout = (ms: number): Promise < never > =>

new Promise((_, reject) =>
setTimeout(() => reject(new Error(`Timeout after ${ms}ms`)), ms)
);

// Simulate API call with timeout async function fetchWithTimeout < T > (
promise: Promise < T >, timeoutMs: number = 5000

): Promise<T> {
return Promise.race([
promise, timeout(timeoutMs).then(() => {
throw new Error(`Request timed out after ${timeoutMs}ms`);
}),
]);
}
// Usage example async function fetchUserData() {
try {
const response = await fetchWithTimeout(

fetch('https://api.example.com/user/1'),

);
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', (error as Error).message);
throw error;
}
}

Promise.allSettled - Handle All Results
When you want to wait for all promises to complete, regardless of success or failure.
// Simulate multiple API calls with different outcomes const fetchData = async (id: number) => {

// Randomly fail some requests if (Math.random() > 0.7) {
throw new Error(`Failed to fetch data for ID ${id}`);
}
return { id, data: `Data for ${id}` };
};
// Process multiple items with individual error handling async function processBatch(ids: number[]) {
const promises = ids.map(id =>
fetchData(id).then(value => ({ status: 'fulfilled' as const, value })).catch(reason => ({ status: 'rejected' as const, reason }))
);
// Wait for all to complete const results = await Promise.allSettled(promises);
// Process results const successful = results.filter((result): result is PromiseFulfilledResult<{ status: 'fulfilled', value: any }> =>
result.status === 'fulfilled' &&
result.value.status === 'fulfilled'
).map(r => r.value.value);
const failed = results.filter((result): result is PromiseRejectedResult |
PromiseFulfilledResult<{ status: 'rejected', reason: any }> => {
if (result.status === 'rejected') return true;
return result.value.status === 'rejected';
});
console.log(`Successfully processed: ${successful.length}`);
console.log(`Failed: ${failed.length}`);
return { successful, failed };
}
// Process a batch of IDs processBatch([1, 2, 3, 4, 5]);

Warning:

When using

Error Handling in Async Code

TypeScript provides powerful tools for type - safe error handling in asynchronous code.

Error Handling Strategies