Converting a JavaScript function to TypeScript with class-like variables inside: a step-by-step guide

Question

Converting a JavaScript function to TypeScript with class-like variables inside: a step-by-step guide

During the process of converting a codebase to TypeScript, I encountered something unfamiliar. In particular, there are two functions with what appear to be class-like variables within them. The following function is one that caught my attention:

const wait = (ms) =>
    new Promise((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            delete wait.reject;
            resolve();
        }, ms);

        wait.reject = (reason) => {
            clearTimeout(timeoutId);
            reject(reason);
        };
    });

As you can observe, it contains a variable called wait.reject, which is an arrow function defined at the end. Despite deleting the reject variable after a certain time duration.

To incorporate typing for this scenario, I resorted to using (wait as { reject: ... }.reject, as shown below:

const wait = (ms: number) =>
    new Promise<void>((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            delete (wait as { reject?: () => void }).reject;
            resolve();
        }, ms);

        (wait as { reject?: (reason: string) => void }).reject = (reason: string) => {
            clearTimeout(timeoutId);
            reject(reason);
        };
    });

Naturally, relying on as is not the most favorable approach. Is there anyone who knows the correct way to type this? This issue extends beyond just one function in the codebase.

Your assistance and insights are greatly appreciated! :)

javascript typescript

Answer 1

Answer №1

Let me begin by strongly suggesting against the current implementation of the wait function in your code. If you happen to make two consecutive calls to wait, the second call's reject will overwrite the first one. It might be more beneficial to return an object with separate promise and reject properties, enabling the consumer of the function to manage them independently. This approach is especially useful when refactoring existing codebases in TypeScript.

Now, let's discuss the types:

The wait function expects a numeric parameter and returns a promise that resolves to void. Additionally, it includes an optional reject property, which accepts any reason and returns void. By defining this type as a combination of a function and an object with the optional reject property, we can ensure better control over error handling:

type WaitFn = ((ms: number) => Promise<void>) & { reject?: (reason: any) => void };

To utilize this type within the wait function, follow this pattern:

const wait: WaitFn = (ms: number) =>
    new Promise<void>((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            delete wait.reject;
            resolve();
        }, ms);

        wait.reject = (reason) => {
            clearTimeout(timeoutId);
            reject(reason);
        };
    });

If desired, the type annotations for ms and new Promise can be omitted since they can be inferred from the defined WaitFn type:

const wait: WaitFn = (ms) =>
    new Promise((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            delete wait.reject;
            resolve();
        }, ms);

        wait.reject = (reason) => {
            clearTimeout(timeoutId);
            reject(reason);
        };
    });

In summary, I recommend using the revised approach where the wait function returns an object containing both the promise and reject elements separately, preventing any potential overlapping issues in case of multiple function calls.

This updated structure would look like this:

const wait = (ms: number) => {
    let promiseReject: (reason: any) => void;
    let timeoutId: ReturnType<typeof setTimeout>;
    const promise = new Promise<void>((resolve, _reject) => {
        promiseReject = _reject;
        timeoutId = setTimeout(() => {
            resolve();
        }, ms);
    });
    let reject = (reason: any) => {
        clearTimeout(timeoutId);
        promiseReject(reason);
    };
    return { promise, reject };
};

To use this function, simply assign the returned values to variables and handle them accordingly:

const { promise, reject } = wait(1000);
// Handle the promise or call reject if needed...

Answer 2

Let me begin by strongly suggesting against the current implementation of the wait function in your code. If you happen to make two consecutive calls to wait, the second call's reject will overwrite the first one. It might be more beneficial to return an object with separate promise and reject properties, enabling the consumer of the function to manage them independently. This approach is especially useful when refactoring existing codebases in TypeScript.

Now, let's discuss the types:

The wait function expects a numeric parameter and returns a promise that resolves to void. Additionally, it includes an optional reject property, which accepts any reason and returns void. By defining this type as a combination of a function and an object with the optional reject property, we can ensure better control over error handling:

type WaitFn = ((ms: number) => Promise<void>) & { reject?: (reason: any) => void };

To utilize this type within the wait function, follow this pattern:

const wait: WaitFn = (ms: number) =>
    new Promise<void>((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            delete wait.reject;
            resolve();
        }, ms);

        wait.reject = (reason) => {
            clearTimeout(timeoutId);
            reject(reason);
        };
    });

If desired, the type annotations for ms and new Promise can be omitted since they can be inferred from the defined WaitFn type:

const wait: WaitFn = (ms) =>
    new Promise((resolve, reject) => {
        const timeoutId = setTimeout(() => {
            delete wait.reject;
            resolve();
        }, ms);

        wait.reject = (reason) => {
            clearTimeout(timeoutId);
            reject(reason);
        };
    });

In summary, I recommend using the revised approach where the wait function returns an object containing both the promise and reject elements separately, preventing any potential overlapping issues in case of multiple function calls.

This updated structure would look like this:

const wait = (ms: number) => {
    let promiseReject: (reason: any) => void;
    let timeoutId: ReturnType<typeof setTimeout>;
    const promise = new Promise<void>((resolve, _reject) => {
        promiseReject = _reject;
        timeoutId = setTimeout(() => {
            resolve();
        }, ms);
    });
    let reject = (reason: any) => {
        clearTimeout(timeoutId);
        promiseReject(reason);
    };
    return { promise, reject };
};

To use this function, simply assign the returned values to variables and handle them accordingly:

const { promise, reject } = wait(1000);
// Handle the promise or call reject if needed...

Converting a JavaScript function to TypeScript with class-like variables inside: a step-by-step guide

Answer №1

Similar questions

Tips for restricting access to specific routes in VueJS using Store state

What is the best way to show the current date and time?

org.openqa.selenium.WebDriverException: unexpected issue: Chrome failed to initiate: crashed.(chrome inaccessible)

Retrieve the value of a property in a JavaScript object by specifying a dynamic key for the property

ReactJS Components failing to load on initial site visit, only appearing after refreshing for the second time

Unlocking the potential of deeply nested child objects

Vue.js: Issue with updating list in parent component when using child component

I am interested in having the push notification feature function specifically for registered users

Why am I not receiving any results from the communication between JavaScript and PHP using an HTTP GET request?

The Tailwind CSS Chrome extension is causing disruptions on the websites I view

Why is the Routes module failing to acknowledge the component?

AngularJS selection controls: checkbox and dropdown menus

techniques for accessing HTML source code through an AJAX call

Encountered Error: Rendered an excessive number of hooks beyond the previous render in the framework of Typescript and

When the query result is received in Angular TypeScript, translate epoch time into a time string

Angular 2 ngFor generates a collection of rows and columns forming a single large column

What causes React JS to continuously render in an infinite loop when using hooks and useState

Changing the website address | Node.js | Express

Exploring (nested) data structures in JavaScript

What are the steps to redirect from a nested route back to the top route using Node.js with Express?