Mastering Deferred Promises in TypeScript

Table of Contents#

1. Fundamental Concepts of Deferred Promises
2. Usage Methods
3. Common Practices
4. Best Practices
5. Conclusion
6. References

Fundamental Concepts of Deferred Promises#

A regular promise in TypeScript is created with a constructor that takes an executor function. This executor function has two parameters: resolve and reject, which are used to change the state of the promise to either fulfilled or rejected respectively.

const regularPromise = new Promise((resolve, reject) => {
    // Simulate an asynchronous operation
    setTimeout(() => {
        resolve('Success');
    }, 1000);
});
 
regularPromise.then((result) => {
    console.log(result);
});

A deferred promise, on the other hand, separates the creation of the promise from the code that resolves or rejects it. It typically consists of three parts:

• A promise object that can be used to attach then and catch handlers.
• A resolve function that can be called to fulfill the promise.
• A reject function that can be called to reject the promise.

Here is a simple implementation of a deferred promise in TypeScript:

class Deferred<T> {
    public readonly promise: Promise<T>;
    private _resolve!: (value: T | PromiseLike<T>) => void;
    private _reject!: (reason?: any) => void;
 
    constructor() {
        this.promise = new Promise<T>((resolve, reject) => {
            this._resolve = resolve;
            this._reject = reject;
        });
    }
 
    public resolve(value: T | PromiseLike<T>): void {
        this._resolve(value);
    }
 
    public reject(reason?: any): void {
        this._reject(reason);
    }
}
 
// Usage
const deferred = new Deferred<string>();
 
deferred.promise.then((result) => {
    console.log(result);
});
 
// Later, resolve the promise
setTimeout(() => {
    deferred.resolve('Deferred Success');
}, 1000);

Usage Methods#

Event Handling#

Deferred promises can be used to handle events in a more controlled way. For example, let's say you have a custom event emitter and you want to wait for a specific event to occur before proceeding.

class EventEmitter {
    private events: { [key: string]: ((...args: any[]) => void)[] } = {};
 
    on(event: string, callback: (...args: any[]) => void) {
        if (!this.events[event]) {
            this.events[event] = [];
        }
        this.events[event].push(callback);
    }
 
    emit(event: string, ...args: any[]) {
        if (this.events[event]) {
            this.events[event].forEach((callback) => callback(...args));
        }
    }
}
 
const emitter = new EventEmitter();
const deferred = new Deferred<string>();
 
emitter.on('customEvent', (data) => {
    deferred.resolve(data);
});
 
deferred.promise.then((result) => {
    console.log('Received event data:', result);
});
 
// Emit the event later
setTimeout(() => {
    emitter.emit('customEvent', 'Event Data');
}, 1000);

Testing#

Deferred promises are also useful in testing asynchronous code. You can use them to control the resolution or rejection of a promise during a test.

function asyncFunction(deferred: Deferred<string>) {
    // Simulate an asynchronous operation
    setTimeout(() => {
        deferred.resolve('Async Result');
    }, 1000);
}
 
// Test
const deferred = new Deferred<string>();
asyncFunction(deferred);
 
deferred.promise.then((result) => {
    console.assert(result === 'Async Result', 'Test failed');
});

Common Practices#

Error Handling#

Just like regular promises, deferred promises should have proper error handling. You can use the catch method on the promise to handle any rejections.

const deferred = new Deferred<string>();
 
deferred.promise
  .then((result) => {
        console.log(result);
    })
  .catch((error) => {
        console.error('Error:', error);
    });
 
// Reject the promise
deferred.reject(new Error('Something went wrong'));

Avoiding Memory Leaks#

When using deferred promises in event handling or other scenarios where they are associated with long-lived objects, make sure to clean up any references to avoid memory leaks. For example, if you have an event listener that resolves a deferred promise, remove the listener when it's no longer needed.

const emitter = new EventEmitter();
const deferred = new Deferred<string>();
 
const eventCallback = (data) => {
    deferred.resolve(data);
    // Remove the listener after the promise is resolved
    emitter.off('customEvent', eventCallback);
};
 
emitter.on('customEvent', eventCallback);
 
deferred.promise.then((result) => {
    console.log('Received event data:', result);
});
 
// Emit the event later
setTimeout(() => {
    emitter.emit('customEvent', 'Event Data');
}, 1000);

Best Practices#

Keep the Scope Small#

Limit the scope of the deferred promise to the smallest possible area of your code. This makes it easier to understand and maintain the code. For example, if you are using a deferred promise to handle an event in a specific function, keep the deferred promise creation and handling within that function.

Use Descriptive Names#

Use descriptive names for your deferred promises, resolve functions, and reject functions. This makes the code more readable and self-explanatory. For example, instead of using a generic deferred, you could use a name like userLoggedInDeferred if it's related to a user login event.

Follow the Promise API#

Make sure to follow the standard promise API when using deferred promises. This includes using then, catch, and finally methods appropriately.

Conclusion#

Deferred promises in TypeScript are a powerful tool for managing asynchronous operations with more control. They allow you to separate the creation of a promise from its resolution or rejection, which can be useful in various scenarios such as event handling and testing. By understanding the fundamental concepts, usage methods, common practices, and best practices, you can effectively use deferred promises in your TypeScript projects.

References#

• MDN Web Docs - Promise
• TypeScript Documentation