HTMLInputElement에 number 사용하기

> 오류

페이지네이션을 작업하던 중 뜻하지 않은 에러가 나타났다.

Argument of type 'string' is not assignable to parameter of type 'SetStateAction<number>'.
TS(2345)

rowsPerPage는 페이지당 데이터 갯수(25개, 50개, 100개)를 보여주는 number인데

 

매개변수의 타입이 string이어서 number는 들어갈 수 없다는 오류이다.

 

> 해결

구글링을 해본 결과

 

아주 높은 확률로 typeof e.target.value === 'string'이기 때문에, 타입스크립트가 오류로 뱉어내는 것이라 한다.

 

HTML5에는 분명 number type input이 있긴 하지만, 일반 input과 차이가 없고

마크업의 내용상 개선과 클라이언트 구현 코스메틱을 위해 도입된 부가적인 옵션이라 생각해야 한다고 한다.

 

input type="email"처럼  오늘날 대다수 모던 브라우저가 email type input에 꽤 많은 부가적 기능을 제공하더라도

타입스크립트나 JS가email type을 지원하지 않는 것과 같은 맥락으로 생각하면 된다고 한다.

 

그래서 변환해서 사용하면 더이상 에러가 출력되지 않고 정상 작동한다 🙂

setRowsPerPage(parseFloat(e.target.value));