This error means the TypeScript compiler found an expression where it expected a number for an arithmetic operation (like +, -, *, /), but instead found something else.
Common Causes and Fixes for TS2362
1. undefined or null in Arithmetic
Diagnosis: The most frequent culprit is attempting to perform arithmetic on a variable that might be undefined or null, often due to optional properties or failed lookups.
Check: Hover over the variable in your IDE or use console.log(typeof variableName) before the operation.
Fix: Ensure the variable has a default value or is explicitly checked before use.
// Problematic code
let count: number | undefined;
let total = count * 10; // TS2362
// Fix 1: Default value
let count: number | undefined = 0;
let total = count * 10; // Works, total is 0
// Fix 2: Nullish coalescing operator
let count: number | undefined;
let total = (count ?? 0) * 10; // Works, total is 0 if count is undefined or null
// Fix 3: Explicit check
let count: number | undefined;
let total = 0;
if (count !== undefined && count !== null) {
total = count * 10; // Works
}
Why it works: These fixes guarantee that the variable holds a number (or a value that TypeScript can treat as a number in the operation) before the multiplication occurs.
2. String Numbers in Arithmetic
Diagnosis: JavaScript often coerces strings that look like numbers into numbers automatically. TypeScript, being stricter, flags this unless you explicitly convert the string.
Check: console.log(typeof variableName) will show "string".
Fix: Use parseInt(), parseFloat(), or the unary plus operator (+) to convert the string to a number.
// Problematic code
let quantity: string = "5";
let price = quantity * 2; // TS2362
// Fix 1: parseInt
let quantity: string = "5";
let price = parseInt(quantity, 10) * 2; // Works, price is 10 (use radix 10)
// Fix 2: Unary plus
let quantity: string = "5";
let price = +quantity * 2; // Works, price is 10
Why it works: parseInt, parseFloat, and the unary plus operator are explicit JavaScript mechanisms for converting string representations of numbers into actual number types.
3. Boolean Values in Arithmetic
Diagnosis: While JavaScript treats true as 1 and false as 0 in arithmetic, TypeScript enforces type safety and will prevent this implicit coercion.
Check: console.log(typeof variableName) will show "boolean".
Fix: Explicitly convert the boolean to a number.
// Problematic code
let isActive: boolean = true;
let multiplier = isActive * 5; // TS2362
// Fix: Explicit conversion
let isActive: boolean = true;
let multiplier = Number(isActive) * 5; // Works, multiplier is 5
// Or more commonly, use a conditional
let isActive: boolean = true;
let multiplier = isActive ? 5 : 0; // Works, multiplier is 5
Why it works: Number(boolean) explicitly converts true to 1 and false to 0. The ternary operator provides a clear conditional assignment.
4. Array Elements in Arithmetic
Diagnosis: Attempting to use an array directly in an arithmetic operation is invalid. You need to access a specific element.
Check: console.log(variableName) will show an array [].
Fix: Access the desired element by its index.
// Problematic code
let numbers = [10, 20, 30];
let sum = numbers * 2; // TS2362
// Fix: Access an element
let numbers = [10, 20, 30];
let firstTwo = numbers[0] * 2; // Works, firstTwo is 20
Why it works: Array indexing ([0]) retrieves a specific value from the array, which can then be used in arithmetic if it’s a number type.
5. Object Properties Not Typed as Number
Diagnosis: You might be accessing an object property that you expect to be a number, but its type definition (or lack thereof) doesn’t reflect that.
Check: Hover over the property in your IDE to see its declared type.
Fix: Ensure the object’s type definition correctly specifies the property as number, or perform type assertions/checks.
interface Config {
timeout?: string; // Expected number, but is string
}
// Problematic code
const config: Config = { timeout: "5000" };
let duration = config.timeout * 1000; // TS2362
// Fix 1: Correct type definition
interface Config {
timeout?: number;
}
const config: Config = { timeout: 5000 };
let duration = config.timeout! * 1000; // Works (using non-null assertion for example)
// Fix 2: Type assertion or conversion
interface Config {
timeout?: string | number; // Allow string or number
}
const config: Config = { timeout: "5000" };
let duration = Number(config.timeout) * 1000; // Works
Why it works: By ensuring the property’s type is number or by explicitly converting it using Number(), you satisfy TypeScript’s requirement for numeric operands.
6. Function Return Types
Diagnosis: A function you’re calling might be declared to return any, string, boolean, null, undefined, or an object, but you’re trying to use its return value directly in an arithmetic context.
Check: Examine the return type signature of the function.
Fix: Ensure the function’s return type is number or that you handle the actual returned type appropriately.
// Problematic code
function getDelay(): string {
return "1000";
}
let delayMs = getDelay() * 10; // TS2362
// Fix: Explicit conversion
function getDelay(): string {
return "1000";
}
let delayMs = parseInt(getDelay(), 10) * 10; // Works
Why it works: Similar to string numbers, explicitly converting the string return value to a number makes it usable for arithmetic.
The next error you’ll likely encounter after fixing these is TS2322: Type 'X' is not assignable to type 'Y', as you start cleaning up other type inconsistencies.