Learn to effectively debug and resolve TypeScript errors like TS2322 with detailed explanations and actionable steps.
TS2322: Type 'string' Is Not Assignable to Type 'number'
The TS2322 error occurs when you attempt to assign a value of one type (e.g., string) to a variable or property that expects another type (e.g., number).
For example:
let age: number = "25"; // Error: Type 'string' is not assignable to type 'number'.Why This Happens
- Type Declaration Mismatch: A variable or property is declared with a specific type (e.g.,
number), but the assigned value doesn't match. - Unprocessed Input: Form inputs and API data often arrive as strings, even when they represent numbers.
- Static Type Enforcement: TypeScript enforces the strict type constraints declared in your code to prevent runtime errors.
How to Fix
1. Convert the Value
If the value is a string that should be treated as a number:
let age: number = parseInt("25", 10); // Correctly converts '25' to a number.2. Use Union Types
If the variable legitimately accepts multiple types:
let age: number | string = "25"; // Accepts both numbers and strings.3. Check Type Declarations
Ensure correct type declarations in your code:
let age: number = 25; // Type matches declaration and satisfies TypeScript.Avoid quick fixes like assigning any, as this undermines TypeScript’s type safety.
How to Read TypeScript Errors Effectively
Identifying the Error Causes
To avoid the TS2322 error, examine your code for these potential issues:
- Incorrect Type Declarations: Ensure variables are declared with the correct type.
- Unexpected Input Formats: For example, data from external APIs or form inputs arriving as strings.
- Need for Type Widening or Narrowing:
- Widening: Use union types if a variable may accept multiple value types.
- Narrowing: Implement runtime checks and guards to ensure correct types before assignment.
Implementing Fixes
Follow these steps to resolve TS2322 errors effectively:
steps
Convert Values When Necessary
If type conversion is needed, use helper methods likeparseIntorNumberfor numeric conversion.typescriptconst input: string = "42"; const value: number = Number(input); // Correctly converts string to a number.Define Union Types for Compatibility
When a variable can hold multiple types, define a union type:typescriptlet id: string | number = "123"; // Accepts both string and number.Inspect Type Declarations
Check or update inferred types and annotations in your code:typescriptlet age: number = 30; // Matches number type without causing errors.Enable Strict Mode
Adjust your TypeScript configuration for stricter type checking. Modifytsconfig.json:json{ "compilerOptions": { "strict": true } }Fix issues incrementally to prevent overwhelming error lists.
Preventing TS2322 Errors in Strict Mode
Enabling strict mode in TypeScript accelerates error detection, identifying potential issues like TS2322 early in development. By catching type mismatches at compile time, you can ensure your program avoids unexpected runtime failures. Adopting strict mode from the beginning simplifies the development process.
FAQ
What is TS2322 in TypeScript?
TS2322 is a TypeScript error that occurs when you assign a value of one type to a variable or property expected to have another type. For example, assigning a string to a variable declared as number.
How do I fix 'Type string is not assignable to type number'?
You can resolve this by converting the value to the expected type (e.g., using parseInt) or modifying the variable’s type to include both options (e.g., string | number).
Does enabling strict mode help with TS2322?
Yes. Enabling strict mode in TypeScript improves type-checking and helps identify potential TS2322 errors early during development.
Can I avoid TS2322 by using 'any' type?
While using the any type can suppress TS2322, it eliminates type safety, which defeats the purpose of using TypeScript. It’s better to use proper type annotations, conversions, or type guards to handle mismatches.
Official reference: TypeScript handbook.