[타입스크립트] <HTMLInputElement>는 string만 된다구??? (초보주의 !!)
조회수 714회
리덕스툴킷에 타입스크립트를 적용하는 공부를 하고 있습니다.
저의 카운터 컴포넌트 입니다.
import React, {useState} from 'react'
import {useAppSelector, useAppDispatch} from '../app/hook'
import {decrement,increment,incrementByAmount} from '../modules/counterSlice'
export default function Counter() {
const count = useAppSelector(state => state.counterSlice.value)
const dispatch = useAppDispatch();
const onIncrease = () => dispatch(increment())
const onDecrease = () => dispatch(decrement())
const [input, setInput] = useState<number>(0)
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
// setInput(e.target.value)
}
const onSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
e.preventDefault()
dispatch(incrementByAmount(input))
setInput(0);
}
return (
<div>
<h1>{count}</h1>
<div>
<button onClick={onIncrease}>+1</button>
<button onClick={onDecrease}>-1</button>
</div>
<div>
<input type="number" value={input} onChange={onChange}/>
<button onClick={onSubmit}>더하기</button>
</div>
</div>
)
}
여기서 onChange
함수의 setInput(e.target.value)
에서 에러가 발생했는데요 !!
에러의 내용은 다음과 같습니다.
Argument of type 'string' is not assignable to parameter of type 'SetStateAction'.ts(2345)
이말은 즉슨.. onChange
의 매개변수의 타입이(e: React.ChangeEvent<HTMLInputElement>)
string
이어서 number
가 들어갈수 없다는 건데옹??
어떻게 하면 input
태그에 number
타입을 넣을수 있을까옹 ㅠㅠ
도와주세요 선배님들 !!
충성충성 ^^7
-
(•́ ✖ •̀)
알 수 없는 사용자 - 〉
1 답변
-
아주 높은 확률로,
typeof e.target.value === 'string'
이기 때문에, 타입스크립트가 튕겨내는 겁니다. 테스트HTML5에는 분명 number type input이 있긴 하지만, 이건 본질적으로는 일반 input과 차이가 없고, 마크업의 내용상 개선과 클라이언트 구현 코스메틱을 위해 도입된 부가적인 옵션이라고 생각하셔야 합니다.
input type="email"
과 같은 거라고 보시면 좋을 것 같네요. 오늘날 대다수 모던 브라우저가 email type input에 꽤 많은 부가적 기능을 제공합니다만, 그렇다고 타입스크립트나 JS가Email
타입을 제공하진 않죠. 이메일 주소라는 건 걍 문자열이거든요(근데 이제 입력 받을 때의 규칙이 좀 까다로운).input type="number"
도 사실은 이와 사정이 크게 다르지 않은 것입니다.그런 의미에서, 그냥 변환해서 쓰시면 될 거 같습니다.
setInput(parseFloat(e.target.value)); // parseInt 하지 않은 이유는 input 속성에 step=1이 없기 때문
댓글 입력