What is TS2322?
TS2322 is one of the most common TypeScript errors. It occurs when you try to assign a value of one type to a variable or parameter that expects a different type. TypeScript's type system catches these mismatches at compile time, preventing potential runtime errors.
// Example of TS2322 error let age: number = "25"; // Error: Type 'string' is not assignable to type 'number'
Common Causes
1. Primitive Type Mismatch
The most basic form of TS2322 occurs when you assign a value of the wrong primitive type:
// ❌ Wrong let count: number = "10"; let isActive: boolean = "true"; let name: string = 123; // ✅ Correct let count: number = 10; let isActive: boolean = true; let name: string = "John";
2. Object Property Mismatch
When object properties don't match the expected interface:
interface User { id: number; name: string; email: string; } // ❌ Wrong - 'id' is string instead of number const user: User = { id: "123", // Error! name: "John", email: "john@example.com" }; // ✅ Correct const user: User = { id: 123, name: "John", email: "john@example.com" };
3. Array Type Mismatch
When array element types don't match:
// ❌ Wrong const numbers: number[] = [1, 2, "3", 4]; // Error! // ✅ Correct const numbers: number[] = [1, 2, 3, 4]; // Or if you need mixed types: const mixed: (number | string)[] = [1, 2, "3", 4];
4. Function Return Type Mismatch
When a function returns a different type than declared:
// ❌ Wrong function getAge(): number { return "25"; // Error! } // ✅ Correct function getAge(): number { return 25; }
Solutions
1. Fix the Value
The simplest solution is to provide a value of the correct type:
let age: number = 25; // Use number, not string
2. Fix the Type Declaration
If the value is correct, update the type declaration:
let age: string = "25"; // Change type to string // Or use union type let age: string | number = "25";
3. Type Conversion
Convert the value to the expected type:
const input = "25"; let age: number = Number(input); // Convert string to number let age: number = parseInt(input, 10); // Alternative
4. Type Assertion (Use with Caution)
When you're certain about the type but TypeScript can't infer it:
const value = JSON.parse(data) as User; // Or const value = <User>JSON.parse(data);
⚠️ Warning
Type assertions bypass TypeScript's type checking. Use them only when you're absolutely sure about the type. Incorrect assertions can lead to runtime errors.
Real-World Examples
API Response Handling
interface ApiResponse { data: User; status: number; } // ❌ Common mistake const response: ApiResponse = await fetch('/api/user').then(r => r.json()); // fetch returns 'any' which might not match ApiResponse // ✅ Better approach with validation const rawData = await fetch('/api/user').then(r => r.json()); const response: ApiResponse = { data: rawData.data as User, status: Number(rawData.status) };
React Props
interface ButtonProps { onClick: () => void; disabled: boolean; } // ❌ Wrong - passing string instead of boolean <Button onClick={handleClick} disabled="true" /> // ✅ Correct <Button onClick={handleClick} disabled={true} />
💡 Pro Tip
Use our TypeScript Error Analyzer to paste your complex TS2322 errors and get instant, detailed explanations of exactly which field is causing the mismatch.
Summary
- TS2322 occurs when types don't match during assignment
- Check both the value and the expected type carefully
- Use type conversion when dealing with external data
- Avoid type assertions unless absolutely necessary
- Consider using union types for flexible values