The variables declared within the Promise constructor are being identified as undefined by Typescript

Question

The variables declared within the Promise constructor are being identified as undefined by Typescript

In my code, I am creating a let variable named resolver which I intend to set within a promise constructor function.

interface Request {
    ids: string[];
    resolver: () => void;
    promise: Promise<unknown>
}

class Foo {
    public requests: Request[] = [];

    public createPromise = (ids: string[]) => {
        let resolver;

        const promise = new Promise((r) => { resolver = r; });

        this.requests.push({ ids, resolver, promise });

        return promise;
    };
}

However, when trying to add the object to the requests list, TypeScript throws an error regarding the resolver:

Type 'undefined' is not assignable to type '() => void'.ts(2322)

This means that the resolver variable inside the promise constructor is interpreted as undefined.

typescript typescript-typings

Answer 1

Answer №1

If you want to make some adjustments, here are a few pointers:

Make sure the local variable resolver has a specific type that matches the request interface.
It's important to assert (!) that the variable will be assigned. This is because the assignment occurs in a callback function and TypeScript cannot predict when this function will be executed. Another class could potentially have a similar constructor with a callback that is not called immediately.
The value argument in the request interface function should match the type of the promise. If you don't need a resolved value, you can use Promise<void> instead.

interface MyRequest {
    ids: string[];
    resolver: (value: unknown) => void;
    promise: Promise<unknown>;
}

class Bar {
    public requests: MyRequest[] = [];

    public createNewPromise = (ids: string[]) => {
        let resolver!: (value: unknown) => void;

        const promise = new Promise((r) => { resolver = r; });

        this.requests.push({ ids, resolver, promise });

        return promise;
    };
}

(Changed interface name to avoid clash with fetch API Request.)

Illustration of the assignment concern:

class DummyPromise {
  constructor(executor) {
    // *silence*
  }
}

let resolverOne;
new Promise(r => resolver1 = r);
console.log(resolverOne); // function () ...

let resolverTwo;
new DummyPromise(r => resolver2 = r);
console.log(resolverTwo); // undefined

Answer 2

If you want to make some adjustments, here are a few pointers:

Make sure the local variable resolver has a specific type that matches the request interface.
It's important to assert (!) that the variable will be assigned. This is because the assignment occurs in a callback function and TypeScript cannot predict when this function will be executed. Another class could potentially have a similar constructor with a callback that is not called immediately.
The value argument in the request interface function should match the type of the promise. If you don't need a resolved value, you can use Promise<void> instead.

interface MyRequest {
    ids: string[];
    resolver: (value: unknown) => void;
    promise: Promise<unknown>;
}

class Bar {
    public requests: MyRequest[] = [];

    public createNewPromise = (ids: string[]) => {
        let resolver!: (value: unknown) => void;

        const promise = new Promise((r) => { resolver = r; });

        this.requests.push({ ids, resolver, promise });

        return promise;
    };
}

(Changed interface name to avoid clash with fetch API Request.)

Illustration of the assignment concern:

class DummyPromise {
  constructor(executor) {
    // *silence*
  }
}

let resolverOne;
new Promise(r => resolver1 = r);
console.log(resolverOne); // function () ...

let resolverTwo;
new DummyPromise(r => resolver2 = r);
console.log(resolverTwo); // undefined

The variables declared within the Promise constructor are being identified as undefined by Typescript

Answer №1

Similar questions

Error: the attempt to execute the mongoose connection function has failed due to it not being recognized as a valid function

Executing the Ionic code within the Xcode Swift environment

Restrict the parameter type using a type predicate

What is the significance of the colon before the params list in Typescript?

`Property cannot be redefined: internaldeprecationWarning` detected in a Shopify Hydrogen development project

What is the best way to determine the type of a key within an array of objects

Explore RxJs DistinctUntilChanged for Deep Object Comparison

In Angular 17, is there a way to trigger a component's method when a Signal is modified?

Substitute this.bindMethod for function component

Setting up Webpack for my typescript React project using Webpack Version 4.39.2

ng2-select is experiencing difficulties when attempting to retrieve and process data from an API while also casting it within the initData

Understanding Typescript event handling in React

Error: The binding element titled implicitly possesses a type of 'any'

Loop through the information retrieved from the alertController

What is the most suitable data type to represent an empty object?

Extra assistance might be required to manage the output from these loaders

Nullable Object in Vue 3 Composition API

Inject an asynchronous callback into the constructor of a class by leveraging TypeScript and Node with Passport integration

Using Angular: A guide to setting individual values for select dropdowns with form controls

Typescript - type assertion does not throw an error for an invalid value

The variables declared within the Promise constructor are being identified as undefined by Typescript

Answer №1

Similar questions

Error: the attempt to execute the mongoose connection function has failed due to it not being recognized as a valid function

Executing the Ionic code within the Xcode Swift environment

Restrict the parameter type using a type predicate

What is the significance of the colon before the params list in Typescript?

`Property cannot be redefined: __internal__deprecationWarning` detected in a Shopify Hydrogen development project

What is the best way to determine the type of a key within an array of objects

Explore RxJs DistinctUntilChanged for Deep Object Comparison

In Angular 17, is there a way to trigger a component's method when a Signal is modified?

Substitute this.bindMethod for function component

Setting up Webpack for my typescript React project using Webpack Version 4.39.2

ng2-select is experiencing difficulties when attempting to retrieve and process data from an API while also casting it within the initData

Understanding Typescript event handling in React

Error: The binding element titled implicitly possesses a type of 'any'

Loop through the information retrieved from the alertController

What is the most suitable data type to represent an empty object?

Extra assistance might be required to manage the output from these loaders

Nullable Object in Vue 3 Composition API

Inject an asynchronous callback into the constructor of a class by leveraging TypeScript and Node with Passport integration

Using Angular: A guide to setting individual values for select dropdowns with form controls

Typescript - type assertion does not throw an error for an invalid value

`Property cannot be redefined: internaldeprecationWarning` detected in a Shopify Hydrogen development project