Faced with unknown problem in interview? - Follow these simple steps.

📢 Special Note to Our Readers

If your friends have sent you this newsletter over email, please consider subscribing here so that you get every day’s content direct to your inbox.

Okay, let’s dive into this weekly edition article.

🎯 TypeScript Daily Digest! (Special Edition)

For this weekly edition, let’s take a real-world front-end problem that’s been asked frequently in problem-solving rounds.

Let’s implement a Custom Promise from scratch using vanilla Typescript.

const promise = new Promise((resolve: Function, reject: Function) => {});

// Usage
promise.then((data: any) => {}).catch((error: any)=> {}).finally((data: any) => {});

const customPromise = new CustomPromise((resolve: Function, reject: Function) => {});

// Usage
customPromise.then((data: any) => {}).catch((error: any)=> {}).finally((data: any) => {});

How to approach this question if you are not sure about the implementation?

Let’s say you are asked this question in the interview round and you’ve not done such a polyfill implementation for Promise before.

While that’s possible, you still have time to try different things. I would suggest to remove that thought from your mind. Focus on the problem at hand.

1. Can we narrow down the scope of the problem considering the interview time? [Promise has a lot of things (Promise.all, Promise.resolve, Promsie.reject, …)]. You definitely won’t be able to implement everything given the short span of time.

2. What do you already know about Promises and how they are used?

3. What concepts from the JS/TS fundamentals you can start applying here?

4. Also, start interacting with the interviewer about the things that you are brainstorming.

Having all of these in mind, let’s try to solve this problem.

Can we narrow down the scope of the problem considering the interview time?

Yes. Let’s check with the interviewer if it is ok to concentrate on the following aspects:

1. .then handling

2. .catch handling

3. .finally handling

4. Actual promise (resolve, reject)

What do you already know about Promises and how they are used?

You know that Promises are classes (in a way). You provide a callback function to its constructor during initialization. Something like below:

const promise = new Promise(callback);

So, how can you achieve this part alone?

All we need is a class and the constructor needs to take an argument which is a function. Let’s try to build that:

class Custom {
    constructor(arg: Function) {}
}

Simple, now we have already gotten started with our implementation.

What concepts from the JS/TS fundamentals you can start applying here?

If you look closely at the promise handling of then, catch, finally:

promise.then( ... ).catch( ... ).finally( ... )

What can you see here?

It is a simple function chaining in Javascript. It’s even easier to implement if you have classes. You just have to return this.

class Custom {
    constructor(arg: Function) {}

    then(data: any) {
        // Actual logic

        // Adding this helps you chain all public methods.
        return this;
    }

    catch(error: any) {
        // Actual logic

        // Adding this helps you chain all public methods.
        return this;
    }

    finally(data: any) {
        // Actual logic

        // Adding this helps you chain all public methods.
        return this;
    }
}

Now, we have a basic implementation of then, catch, and finally. Of course, we still have not handled the code logic inside it.

From now on, it gets a little tricky. You need to think a little out-of-the-box to achieve the following:

const promiseMethod = (resolve: Function, reject: Function) => {
 // logic
}

const promise = new Promise(promiseMethod);

If you look at the above code, the Promise constructor is called with a function promiseMethod which in-turn takes 2 arguments resolve, and reject.

The first question is:

How will you get a hold of resolve and reject to be able to use inside our Custom Class?

There is something called .bind in Javascript. What it does is bind a function with scope and some arguments for it to be called later with those updated sets of values and scope. The same holds true for using .call, .apply or directly calling the function with different arguments.

const promiseMethod = (resolve: Function, reject: Function) => {
 // logic
}

const promise = new Promise(promiseMethod);

Taking this as an example again, we can invoke the promiseMethod from inside the constructor by passing our own dummy methods for resolve and reject. These methods will be called during the flows. Applying this to our custom class, we get the following:

type PromiseArg = (resolve: Function, reject: Function) => void;

class Custom {
    constructor(executableMethod: PromiseArg) {
        const resolve = (data: any) => {
            // logic
        };

        const reject = (error: any) => {
            // logic
        };

        executableMethod(resolve, reject); // Binds our resolve and reject
    }

    then(data: any) {
        // Actual logic

        // Adding this helps you chain all public methods.
        return this;
    }

    catch(error: any) {
        // Actual logic

        // Adding this helps you chain all public methods.
        return this;
    }

    finally(data: any) {
        // Actual logic

        // Adding this helps you chain all public methods.
        return this;
    }
}

const resolve = (data: any) => {
            // logic
        };

        const reject = (error: any) => {
            // logic
        };

        executableMethod(resolve, reject); // Binds our resolve and reject

This part takes care of the invocations to the passed method. Whenever resolve or reject is invoked by the caller, our methods get invoked. This gives us control over the flow.

Now, we can go ahead and implement the rest of the logic for then, catch, and finally.

Below is the fully-fledged implementation of the Custom Promise in case you are interested in the implementation as well. This includes things like Promises state, Invocations, then, catch, finally, and passing down the data.

🏁 Wrapping It Up

Another day, another dive into the world of TypeScript. As we cross the finish line today, remember to keep exploring, keep learning, and most importantly, keep coding. If you found value in today's insights, please consider sharing this newsletter with friends or on social media — every share helps us reach more TypeScript enthusiasts like you! Stay tuned for tomorrow's journey.