DEV Community

Lior Amsalem
Lior Amsalem

Posted on

TS2322: Type '{0}' is not assignable to type '{1}'

TS2322: Type '{0}' is not assignable to type '{1}'

TypeScript is a statically typed superset of JavaScript that brings strict type-checking to the language. By introducing types into JavaScript, TypeScript provides developers with a powerful tool to write safer, more robust, and maintainable code. In TypeScript, types serve as a constraint mechanism to ensure that variables, functions, and objects adhere to the expected structure. This is especially helpful for catching bugs during development rather than at runtime.

If you're looking to master TypeScript or explore other AI tools to enhance your coding skills, consider subscribing to my blog or using tools like GPTeach to sharpen your skills.

In this article, we will dive deeper into TS2322: Type '{0}' is not assignable to type '{1}' and how to address issues related to it. Before we cover this specific TypeScript error in depth, let’s first understand the concept of types.

What Are Types?

In TypeScript, a "type" is a way to define a specific shape or nature of data. Types help ensure that data behaves as expected and that your code is free of type-related runtime errors. Think of types as rules that specify what kind of value a variable must have. For example:

let message: string = "Hello, World!";
let age: number = 25;
let isActive: boolean = true;
Enter fullscreen mode Exit fullscreen mode

In the example above:

  • message is of type string, meaning it must always hold text values.
  • age must be a number.
  • isActive must be a boolean (true or false).

TypeScript takes these definitions and uses them to enforce proper usage across your codebase.

Important to Know!

  • If you don’t explicitly assign a type to a variable, TypeScript will try to infer it based on its initial value.
  • Errors like TS2322 typically occur when the assigned value doesn’t match the expected type.

Now that you understand what types are and how they work, let's break down the infamous TS2322: Type '{0}' is not assignable to type '{1}'.

Understanding TS2322: Type '{0}' is not assignable to type '{1}'

This error occurs when you try to assign a value to a variable (or pass a value to a function parameter, assign an object property, etc.) where the type of the value does not match the type declared or expected by the TypeScript compiler. The error message tells you exactly what the mismatch is:

  • {0}: This is the type of the value you provided (the actual type).
  • {1}: This is the expected type (what TypeScript expects based on your declaration).

Example of TS2322

Let’s look at an example to better understand how this error happens:

let count: number = 10; // "count" is explicitly assigned the number type.

count = "twenty"; // Error: TS2322: Type 'string' is not assignable to type 'number'.
Enter fullscreen mode Exit fullscreen mode

In this scenario, TypeScript expects count to always have a numeric value (number type). Attempting to assign a string value to it triggers the TS2322 error since "twenty" is of type string.

Fixing TS2322: Type '{0}' is not assignable to type '{1}'

The key to resolving this error is to ensure that the assigned value matches the declared type. Here’s how you can address similar scenarios:

Example 1: Correcting Type Declarations 

let count: number = 10;

count = 20; // ✅ No error - 20 is a number.
Enter fullscreen mode Exit fullscreen mode

If you need the ability to assign multiple possible types, you can use a union type:

let count: number | string = 10; // "count" can be a number or a string.

count = "twenty"; // ✅ No error.
count = 30;       // ✅ No error.
Enter fullscreen mode Exit fullscreen mode

Using a union type (|) tells TypeScript that count can either be a number or a string, so the value no longer violates the type constraint.

Important to Know!

Using union types can make your code more flexible, but it’s better to stick to a single type unless absolutely necessary, as it maintains clarity and reduces ambiguity.

Example 2: Fixing Function Parameter Type

Another common scenario where TS2322 occurs is when function parameters have rigid type definitions.

function greet(name: string): void {
  console.log(`Hello, ${name}!`);
}

greet(123); // Error: TS2322: Type 'number' is not assignable to type 'string'.
Enter fullscreen mode Exit fullscreen mode

To fix this, we can either pass the correct type (string) or modify the type declaration.

Correct usage:

greet("Alice"); // ✅ No error.
Enter fullscreen mode Exit fullscreen mode

If you intentionally want to allow different types, use union types:

function greet(name: string | number): void {
  console.log(`Hello, ${name}!`);
}

greet(123);      // ✅ No error.
greet("Alice");  // ✅ No error.
Enter fullscreen mode Exit fullscreen mode

FAQ About TS2322: Type '{0}' is not assignable to type '{1}'

1. Can TS2322 errors occur with objects?

Yes! This error is quite common with objects when their structure doesn’t match the expected type.

interface User {
  name: string;
  age: number;
}

const user: User = {
  name: "John",
  age: 30
}; // ✅ No error.

const invalidUser: User = {
  name: "John",
  age: "30" // Error: TS2322: Type 'string' is not assignable to type 'number'.
};
Enter fullscreen mode Exit fullscreen mode

To fix this, ensure the object properties adhere to the correct types.

2. Are enums a common cause for TS2322?

Yes, especially when trying to assign a value outside an enum’s defined set of values:

enum Status {
  Active,
  Inactive
}

let currentStatus: Status = Status.Active; // ✅ No error.
currentStatus = 2; // ✅ No error (as Status.Active = 0, Status.Inactive = 1).

currentStatus = "active"; // Error: TS2322: Type 'string' is not assignable to type 'Status'.
Enter fullscreen mode Exit fullscreen mode

3. How can type assertions help with TS2322?

Type assertions allow you to tell TypeScript what type a value should have when the compiler cannot infer it outright. However, this should be used with caution to avoid masking genuine errors.

For example:

let value: any = "hello";
let length: number = (value as string).length; // ✅ No error.
Enter fullscreen mode Exit fullscreen mode

Final Thoughts

The TS2322: Type '{0}' is not assignable to type '{1}' error is one of the most common TypeScript errors developers face. It’s the compiler’s way of ensuring type safety in your code and preventing potential runtime errors. By understanding how to declare types properly, fix erroneous assignments, and use union types when necessary, you can eliminate these errors effectively.

If you’re new to TypeScript or looking to deepen your understanding of type safety, subscribe to our blog and explore AI tools like GPTeach. Keep coding safely with TypeScript!

Top comments (0)