[TIL-에러일기] TypeScript left-hand side of an arithmetic operation must be of type 'any' 'number' or an enum type Error

 

 

 

🧐 원인

이 오류는 주로 new Date를 연산하는 과정에서 발생하게 된다.

Javascript 코드에서는 문제가 없었지만 Typescript에서 사용할 경우는 오류로 처리된다.

이는 객체로 생성한 변수의 값을 연산에 사용하기 떄문에 에러가 나는 것 이다.

물론 연산이 불가능한 것은 아니지만 Typescript에서는 명시적으로 연산이 가능하도록 number 처리를 해줘야 하기때문이다.

 

 

 

📌 단항연산자?

단항연산자(Unary Operator)는 한 개의 피연산자, 즉 한개의 인수와 짝을 이루어 역할을 하는 연산자이다.

단항연산자의 종류로는 부호(+,-), 증감연산자(++, —), 비트연산자(~), 논리연산자(!) 가 있다.

이 중의 부호 연산자는 기존의 + 기호와는 달리 숫자를 변환해주는 역할을 담당하는 연산자는 인수의 바로 앞에 붙어 사용된다.

 

💡 ECMA 문서에 따른면 `단항연산자 (+)` 는 문자(string)타입 인수를 숫자(Number)타입 형태로 빠르고 간단하게 바꾸어주는 문법이라고 명시하고 있다.

기존 자바스크립트에서 문자열을 숫자로 변환할 때 사용하던 parseInt , parseFloat , Number 함수를 생각하자면, 단항연산자 (+) 는 코드도 아주 심플하고 가독성도 좋다

 

 

 

단항연산자 (+)가 적용 범위

단항 더하기 연산자 + 는 피연산자가 숫자가 아니라면 숫자로 변환을 시도합니다.

정수와 실수로 된 문자열 표현뿐 아니라 문자열이 아닌 boolean(true, false), null 또한 변환할 수 있다. 또한 10진수와 16진수, 음수 형식의 정수도 지원이 가능하다.

const x = 1;
const y = -1;

console.log(+x);
// Expected output: 1

console.log(+y);
// Expected output: -1

console.log(+'');
// Expected output: 0

console.log(+true);
// Expected output: 1

console.log(+false);
// Expected output: 0

console.log(+'hello');
// Expected output: NaN

 

다만 주의할 점은 BigInt 값에 연산자를 사용하면 TypeError를 발생하며, 특정 값의 구문을 분석할 수 없다면 NaN으로 리턴한다.

 

 

 

🛠️ 해결방법

따라서 이 오류를 해결하는 방법은 단항 연산자(Unary Operator)인 '+' 를 지정하면 된다.

//(...중략)

const {isLoading, data: price} = useQuery<CoinPriceInterface[]>("key", fetchData);

const getSeriesValue = () => {
        return data?.map(v=> {
                date : new Date(+price.time_close * 1000),     //⭐=> +price.time_close * 1000
                //(...중략)
        });
}

 

 

---

참고

• 단항 연산자 MDN 문서
• 단항 연산자 (+)로 문자열을 숫자로 변환하는 법