Type 'Promise' is not assignable to type in TypeScript

avatar

Borislav Hadzhiev

Last updated: Mar 7, 2022

banner

Photo from Unsplash

Type 'Promise' is not assignable to type in TypeScript #

The "Type 'Promise' is not assignable to type" TypeScript error occurs when we try to assign a value that has a type of Promise to a value that has an incompatible type. To solve the error, resolve the Promise and make the two values of compatible types before the assignment.

Here is an example of how the error occurs.

index.ts
// 👇️ function example(): Promise<string> async function example() { const result = await Promise.resolve('hello world'); return result; } // ⛔️ Error: Type 'Promise<string>' is // not assignable to type 'string'.ts(2322) const str: string = example();

The function is marked as async and all async functions return a Promise. The function in the example above has a return type of Promise<string>.

TypeScript is telling us that we can't assign a value that is of type Promise<string> to the variable str, which has a type of string - the types in the two sides of the assignment are not compatible.

To solve the error, resolve the promise before the assignment.

index.ts
async function example() { const result = await Promise.resolve('hello world'); return result; } example().then((value) => { const str: string = value; console.log(str); // 👉️ "hello world" });

We used the .then() method to resolve the promise before assigning the value to the str variable.

If you are trying to resolve a Promise inside an async function, use the await syntax.

A common cause of the error is when we forget to await a promise.

index.ts
async function example() { // 👇️ forgot to use await const result = Promise.resolve('hello world'); // ⛔️ Error: Type 'Promise<string>' is // not assignable to type 'string'.ts(2322) const greeting: string = result; return greeting; }

The result variable in the function has a type of Promise<string> and we're trying to assign it to a variable that expects a string.

To solve the error, use the await keyword to resolve the promise before the assignment.

index.ts
async function example() { // 👇️ const result: string const result = await Promise.resolve('hello world'); const greeting: string = result; return greeting; }

We used the await keyword and now the result variable stores a string.

Now the greeting and result variables have compatible types, so the assignment can take place without getting a type checking error.

That is the cause of the error - we are trying to assign a value of type Promise<T> to a value that has a different type.

To solve the error, we have to make sure that the values on the left and right-hand sides of the assignment have compatible types.

When using the .then() syntax to resolve the promise, be mindful that it is asynchronous and only access the resolved value in the callback function you passed to the then() method.

index.ts
async function example() { const result = await Promise.resolve({ name: 'Tom', country: 'Chile', }); return result; } type Person = { name: string; country: string; }; example().then((value) => { const person: Person = value; console.log(person); // 👉️ {name: 'Tom', country: 'Chile'} }); // 👇️ code here runs before example().then() has finished

Conclusion #

The "Type 'Promise' is not assignable to type" TypeScript error occurs when we try to assign a value that has a type of Promise to a value that has an incompatible type. To solve the error, resolve the Promise and make the two values of compatible types before the assignment.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.