React typescript - state

const [counter, setCounter] = useState(1);

default 값이 number 이기 때문에 ts는 계속 number타입으로 간주한다.
그러나 값이 string 또는 number처럼 여러가지 타입이 되길 원할 때가 있다. 그럴땐 다음과 같이 한다.

const [counter, setCounter] = useState<number|string>(1);

Form

function App() {
  const 
  const [value, setValue] = useState("");
  const onChange = (event: React.FormEvent<HTMLInputElement>) => {
    const {currentTarget: {value},
          } = event;
    setValue(value);
  };
  const onSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log("hello", value);
  }
  return  (<div>
    <form onSubmit={onSubmit}>
      <input value={value} onChange={onChange} type="text" placeholder="username" />
      <button>Log in</button>
    </form>
  <div>);
}

ts를 사용하여 event 타입을 지정해 주는 경우에 자동완성이 지원되기 때문에 오타같은것을 방지할 수 있다.