[TypeScript] The left-hand side of an arithmetic operation must be of type ‘any’ ‘number’ or an enum type (TS2363)

에러

해당 오류는 주로 타입스크립트에서 숫자가 아닌 것을 연산하는 과정에서 발생하게 됩니다. 자바스크립트 코드에서는 문제없지만 타입스크립트에선 에러를 표시합니다.

for (let i = 0; i < contentsData.length - 1; i++) {
    beforeChartValue.push({
      name: contentsData[i].menuName,
      value: Math.floor(
        contentsData[i].refStdKcal * contentsData[i].beforeAmount
      ),
      per: Math.floor(
        (contentsData[i].refStdKcal * contentsData[i].beforeAmount * 100) /
          RECOMMEND_KCAL_VALUE
      ),
    })

위의 코드는 contentsData[i].refStdKcal * contentsData[i].beforeAmount * 100 처리에서 오류로 발생된다. 이유는 contentsData[i].refStdKcal이 타입이 string인데 이 값을 연산에 사용하기 때문에 오류를 발생시킵니다. 자바스크립트에선 연산 가능하나 타입스크립트에선 이런 것을 개발환경에서 차단해줍니다. 타입스크립트를 사용하는 이유중에 하나입니다.

문제해결

그럼 이를 해결하는 방법은 단항 연산자 (Unary operator)인 + 를 지정하여 해결하면 됩니다.

for (let i = 0; i < contentsData.length - 1; i++) {
    beforeChartValue.push({
      name: contentsData[i].menuName,
      value: Math.floor(
        +contentsData[i].refStdKcal * +contentsData[i].beforeAmount
      ),
      per: Math.floor(
        (+contentsData[i].refStdKcal * +contentsData[i].beforeAmount * 100) /
          RECOMMEND_KCAL_VALUE
      ),
    })

기존코드 contentsData[i].refStdKcal * contentsData[i].beforeAmount * 100 부분에
+contentsData[i].refStdKcal * +contentsData[i].beforeAmount * 100 로 수정해줍니다. (+ 붙여줌으로 string을 숫자타입으로 인식하게 됩니다.)