[TypeScript] HTMLInputElement에 number 적용하는 방법

가계부 웹을 만들던 도중 수입 금액을 리코일로 전역 상태저장하고 기본값을 0으로 한 후 input에 onChange로 값을 넣어주었다.

onChange={(e)=> handleChangeImportAmountValue(e)}

 

const handleChangeImportAmountValue = (e:React.ChangeEvent<HTMLInputElement>) => {
  importAmountValue(e.target.value)
}

이벤트를 넣어주고 이벤트에 맞는 타입을 지정해주고 값을 변경하려니 타입 에러가 났다.

 

'string' 형식의 인수는 'number | ((currVal: number) => number)' 형식의 매개 변수에 할당될 수 없습니다.

 

라고 뜨는 것이다.

 

상태의 기본값이 0이라 타입은 0으로 추론이 되어있을것인데, e.target.value가 string으로 뜨나 싶어서

console.log(typeof e.target.value)를 해준 후 input에 숫자를 입력해보니 string으로 뜨는것이었다.

 

const handleChangeImportAmountValue = (e:React.ChangeEvent<HTMLInputElement>) => {
  importAmountValue(+(e.target.value))
}

 

e.target.value에 +를 붙여 숫자로 변환해주었더니 에러가 없어졌다.

외에도 Number()나 parseInt()를 해주어도 에러가 사라졌다.