How to Resolve "Type Unknown is Not Assignable to Type”

Getting a TypeScript error that says "type unknown is not assignable to type"?

This message can be confusing, especially when working with APIs or handling user input. TypeScript uses unknown to ensure safety, but it requires extra steps to work with it.

Let’s look at why this happens and how to fix it with simple and effective solutions.

What is the unknown Type?

In TypeScript, the unknown type is a type-safe counterpart to the any type. While both unknown and any can represent any value, unknown is safer because it requires developers to perform type checks before using the value. This ensures that operations on variables of type unknown are type-safe.

1let value: unknown;
2value = "Hello, world!";
3value = 42;
4value = { key: "value" };

​

In the example above, the variable value can hold a string, number, or object, but TypeScript won't allow operations on value without first asserting its type.

Understanding the Error: "type unknown is not assignable to type"

This error arises when you attempt to assign a variable of type unknown to a more specific type without proper type checking or assertion. TypeScript's type system enforces that unknown is not assignable to other types to maintain type safety.

1let value: unknown = "Hello, world!";
2let text: string = value; // Error: Type 'unknown' is not assignable to type 'string'.

​

Here, assigning value directly to text results in an error because value is of type unknown. TypeScript prevents this assignment to ensure that text receives a valid string.

Type Assertions: Telling TypeScript the Type

To inform TypeScript about the specific type of an unknown variable, you can use type assertions. This allows you to override the compiler's type inference safely.

1let value: unknown = "Hello, world!";
2let text: string = value as string;
3console.log(text.toUpperCase()); // Outputs: HELLO, WORLD!

​

By asserting value as a string, you can safely perform string-specific operations like toUpperCase().

Type Guards and Narrowing

Type guards are expressions that perform runtime checks to narrow down the type of a variable. They are essential when working with the unknown type, as they allow you to safely determine the variable's actual type before performing operations on it.

1function isString(value: unknown): value is string {
2  return typeof value === "string";
3}
4
5let value: unknown = "Hello, TypeScript!";
6if (isString(value)) {
7  console.log(value.toUpperCase()); // Outputs: HELLO, TYPESCRIPT!
8} else {
9  console.log("Value is not a string.");
10}

​

In this example, the isString function serves as a type guard, ensuring that the value is a string before calling toUpperCase(). This approach prevents runtime errors and aligns with TypeScript's goal of providing type safety.

Common Error Scenarios

Several common scenarios can lead to the "type unknown is not assignable to type" error:

1. Function Return Types: When a function returns an unknown type, attempting to use the result without type checking can cause this error.

1function getData(): unknown {
2  // Fetch data from an API
3}
4
5let data: string = getData(); // Error: Type 'unknown' is not assignable to type 'string'.

​

To resolve this, use a type assertion or a type guard to ensure data is a string before assignment.

2. Promise Rejections: In try-catch blocks, the catch clause variable is of type unknown in TypeScript 4.0 and above.

1try {
2  // Some code that may throw an error
3} catch (error) {
4  console.error(error.message); // Error: Object is of type 'unknown'.
5}

​

Here, error is of type unknown, so accessing error.message directly results in an error. To fix this, assert error as an instance of Error:

1} catch (error) {
2  if (error instanceof Error) {
3    console.error(error.message);
4  } else {
5    console.error("Unknown error:", error);
6  }
7}

​

3. External Data: When working with data from external sources like APIs, the data type is often unknown. Proper validation or type assertions are necessary before using such data.

1async function fetchData() {
2  const response = await fetch("https://api.example.com/data");
3  const data: unknown = await response.json();
4  return data;
5}
6
7const result = await fetchData();
8console.log(result.name); // Error: Object is of type 'unknown'.

​

To handle this, you can define an interface and assert the type:

1interface ApiResponse {
2  name: string;
3  age: number;
4}
5
6async function fetchData(): Promise<ApiResponse> {
7  const response = await fetch("https://api.example.com/data");
8  const data: unknown = await response.json();
9  return data as ApiResponse;
10}
11
12const result = await fetchData();
13console.log(result.name); // Outputs the name property

​

Best Practices for Working with unknown Type

To effectively manage unknown types and avoid the "type unknown is not assignable to type" error, consider the following best practices:

• Use Type Guards: Implement functions that check the type of a variable at runtime to safely narrow down unknown types.

• Apply Type Assertions Sparingly: Use type assertions when you are certain about a variable's type, but be cautious as incorrect assertions can lead to runtime errors.

• Leverage Type Inference: Allow TypeScript to infer types whenever possible to reduce the need for explicit type declarations.

• Validate External Data: Always validate and sanitize data from external sources before using it in your application.

• Avoid Overusing any: Refrain from using the any type, as it bypasses TypeScript's type checking and can lead to unforeseen errors.

The Bottom Line!

The unknown type in TypeScript provides a safer alternative to any, ensuring that developers perform necessary type checks before manipulating variables. By understanding and implementing type guards, assertions, and adhering to best practices, you can effectively handle the "type unknown is not assignable to type" error, leading to more robust and maintainable code.

Short on time? Speed things up with DhiWise!

Tired of manually designing screens, coding on weekends, and technical debt? Let DhiWise handle it for you!

You can build an e-commerce store, healthcare app, portfolio, blogging website, social media or admin panel right away. Use our library of 40+ pre-built free templates to create your first application using DhiWise.