The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type
TypescriptTypescript Problem Overview
1 interface Dimensions {
2 width: Number,
3 height: Number
4 }
5
6 function findArea(dimensions: Dimensions): Number {
7 return dimensions.height * dimensions.width;
8 }
line 7, red squiggly lines under dimensions.height
and dimensions.width
> The left-hand side of an arithmetic operation must be of type 'any', > 'number' or an enum type.
I'm trying to eradicate red squiggly, but I'm stumped as to why the typescript compiler is giving me an error. As far as I can tell, width and height are of type Number.
Typescript Solutions
Solution 1 - Typescript
Here is another example of this error occurring that might help people.
If you're using typescript and trying to compute the difference between dates (In my case I was attempting to use ISO string from database):
new Date("2020-03-15T00:47:38.813Z") - new Date("2020-03-15T00:47:24.676Z")
However, this same exact code works if you put it in the browser console or other node environment
new Date("2020-03-15T00:47:38.813Z") - new Date("2020-03-15T00:47:24.676Z")
14137
I may be wrong, but I believe this works due to the -
operator implicitly using valueOf
on each of it's operands. Since valueOf
on Date returns a number
the operation works.
However, typescript doesn't like it. Maybe there is a compiler option for this is forcing this constrain and I'm not aware.
new Date().valueOf()
1584233296463
You can fix by explicitly making the operands number (bigint) types so the -
works.
Fixed Example
new Date("2020-03-15T00:47:38.813Z").valueOf() - new Date("2020-03-15T00:47:24.676Z").valueOf()
Solution 2 - Typescript
Number
should be lowercase: number
.
Solution 3 - Typescript
cleanest way I found:
const diff = +new Date("2020-03-15") - +new Date("2020-03-15")
Solution 4 - Typescript
you can cast the expression to number.
function findArea(dimensions: Dimensions): Number {
return Number(dimensions.height) * Number(dimensions.width);
}
Solution 5 - Typescript
> ERROR in src/app/demo.component.ts(...): error TS2362: The left-hand side of an arithmetic operation must be of type 'any', 'number' or an enum type.
package.json -
"dependencies": {
"@angular/core": "^6.1.10"
}
"devDependencies": {
"typescript": "^2.9.2"
}
Code -
dateISOString(d: any): string {
var nDate = new Date(d);
var tzoffset = nDate.getTimezoneOffset() * 60000;
var localISOTime = (new Date(nDate - tzoffset)).toISOString(); // This line gives error
return localISOTime;
}
Solution - Add valueOf()
with date
var localISOTime = (new Date(nDate.valueOf() - tzoffset.valueOf())).toISOString();
Solution 6 - Typescript
I ran into this issue when subtracting two dates, the error was bugging me but the program still outputted as expected. Below is code which is sorting an object array by date (newest to oldest).
Issue
var Sorted = Data.sort(function(a,b){ return new Date(b.Posted) - new Date(a.Posted) })
Solution
var Sorted = Data.sort(function(a,b){ return new Date(b.Posted).getTime() - new Date(a.Posted).getTime() })
- Dates: append each value .getTime() to convert from date to number.
- Numbers: wrap each value with parseInt()
From my understanding, this error won't stop the compiler/program from executing; however it's better practice to provide your development environment with explicit/controlled variable types.
For future reference; Javscript & Typescript can be unpredictable when it comes to comparing/calculating certain variables, so using explicit types and casting variables will remove these warnings/errors.
Solution 7 - Typescript
I got to find out that this issue is called by using a .ts file extension instead of .tsx file extension. I recently ran into the issue. its solved my problem