110
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.

jmrah
  • 5,715
  • 3
  • 30
  • 37

9 Answers9

356

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")

TypeScript Playground

It will show the error. enter image description here

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()

TypeScript Playground

Matt Mazzola
  • 4,593
  • 4
  • 22
  • 28
  • 11
    Nice one. I believe this can be added as a separate question – JEWEL JACOB Aug 25 '20 at 11:56
  • 20
    I was actually searching for Date issue only. And was disappointed with the question, coz that deals with something else. But glad to see your answer here. Upvoted. – Raj Feb 01 '21 at 16:53
  • 4
    I didn't expect Typescript to have such unexpected problems for a simple (and probably widely used) feature. Wonder if this will ever get "fixed"? Or is it intentional? If so, why? – Ziwon Jul 13 '21 at 11:09
  • 5
    Small note: the "canonical" way to get a number from a `Date` object in JS is `.getTime()`, however `.valueOf()` works too in that case and returns the same. – jakub.g Feb 01 '22 at 13:28
  • 3
    This question is not what I wanted, but this answer is what I needed. – wongz Dec 20 '22 at 21:34
  • 1
    Same as above. I googled about getting the error with a Date object but got a question about a question about something else. – Adam Jun 01 '23 at 04:44
83

Number should be lowercase: number.

BrunoLM
  • 97,872
  • 84
  • 296
  • 452
  • that did it! Sure enough, I double checked the handbook, and the number type is definitely lower case. Thanks so much. I don't know why I thought it was upper case... – jmrah Apr 11 '16 at 23:09
  • I would not found this in the code in a million years, it was with capital N... thanks. – Yogurtu Jan 12 '22 at 12:51
47

cleanest way I found:

const diff = +new Date("2020-03-15") - +new Date("2020-03-15")

https://github.com/microsoft/TypeScript/issues/5710

Sajad
  • 3,376
  • 3
  • 20
  • 23
  • Same. I think its the cleanest way to go around the warning of ts. – DonKoko Mar 01 '22 at 15:10
  • This is a simple solution, Thanks. You can refer to the below link for the cleanest way as well. https://bobbyhadz.com/blog/typescript-left-hand-side-of-arithmetic-operation-must-be-type – Jai Saravanan Jul 27 '22 at 05:34
10

you can cast the expression to number.

function findArea(dimensions: Dimensions): Number {    
    return Number(dimensions.height) * Number(dimensions.width);
}
samehanwar
  • 3,280
  • 2
  • 23
  • 26
5

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.

kngsly
  • 61
  • 1
  • 2
1

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();
Pinaki
  • 792
  • 8
  • 17
1

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

Gabriel soft
  • 432
  • 3
  • 7
1

the typescript compiler can't find a true value to compute, using the the valueof method solve most of the problems.

using the ! sign beside the value solve the problem

enter image description here enter image description here

Gabriel soft
  • 432
  • 3
  • 7
1

All other answers are about dates. The Original questions was about normal numbers. I made the same mistake to set the function Number instead of the type number (see capitalization). Typescript can't compare the two functions, but it already gives the hint: ... must be of type 'any', 'number',...

interface Dimensions {
  width: number,
  height: number
}

function findArea(dimensions: Dimensions): Number {    
  return dimensions.height * dimensions.width;
}

ps. well I didn't see the accepted answer between all the date answers.

GeoDev
  • 73
  • 8