How To Solve “Type ‘unknown’ is not assignable to type” in TypeScript

Sometimes we will get a value of an unknown data type. For example, when we get the value from the backend server, when we assign this value to a variable that is expecting a different data type, the error “Type ‘unknown’ is not assignable to type in TypeScript” will appear, in this article, we will solve this error by using Type assertions to let TypeScript understand that we are working on other data type. Let’s start together.

The cause of the error “Type ‘unknown’ is not assignable to type” in TypeScript

This error occurs because we assign a value with a data type unknown to a variable that is expecting to receive another data type. This error often occurs when receiving a return value from the server that we do not know in advance what its value is.

Error Example:

// The variable price now has a data type of unknown
const price: unknown = 199;

// Assign the variable price to the variable newPrice, which has a data type of number
const newPrice: number = price;

Output:

Type 'unknown' is not assignable to type 'number'.

In the above example, we declare a variable of unknown data type named price. In fact, this data is returned from an online API server. Then we assign this unknown data to the newPrice variable expecting to receive the number data type because the two parties are incompatible in terms of data types, so an error occurs.

Solution for the error “Type ‘unknown’ is not assignable to type” in TypeScript

To solve this error, we have to let TypeScript understand that we want to work on the number data type. To do that, we can use Type assertions to indicate to the program that it is a number type.

Using Type assertions

Example:

const price: unknown = 199;

// Use Type assertions to indicate to the program that it is a number type
const newPrice: number = price as number;
console.log(newPrice);

Output:

199

In the above example, we are going to implement a technique called Type assertions by using the keyword "as" followed by the data type we want to work on. In this example, it is number type, now both have type number, and newPrice has received value from price, the program does not appear error anymore.

Check the style before assigning.

To avoid errors, we can check the data type before assigning whether it matches or not by using the typeof keyword. If the desired data type is correct, we assign it.

Example:

const price: unknown = 199;
let newPrice: number = 0;

// Use typeof to pre-check the data type
if (typeof price === "number") {
    newPrice = price;
}

console.log(newPrice);

Output:

199

Summary

So we have solved the “Type ‘unknown’ is not assignable to type” in TypeScript error, which occurs when you try to assign a value of type unknown to a variable that is expecting a different data type, using Type assertions we have solved the above error, hope the article is helpful for you, thanks for reading.

Leave a Reply

Your email address will not be published. Required fields are marked *