폼과 이벤트

const el = (
  <button
    onClick={(event) => {
      /* event는 자동으로 올바르게 타이핑됩니다! */
    }}
  />
);

type State = {
  text: string;
};
class App extends React.Component<Props, State> {
  state = {
    text: "",
  };

  // = 의 오른쪽에 타이핑
  onChange = (e: React.FormEvent<HTMLInputElement>): void => {
    this.setState({ text: e.currentTarget.value });
  };
  render() {
    return (
      <div>
        <input type="text" value={this.state.text} onChange={this.onChange} />
      </div>
    );
  }
}

  // =의 왼쪽에 타이핑
  onChange: React.ChangeEventHandler<HTMLInputElement> = (e) => {
    this.setState({text: e.currentTarget.value})
  }

<form
  ref={formRef}
  onSubmit={(e: React.SyntheticEvent) => {
    e.preventDefault();
    const target = e.target as typeof e.target & {
      email: { value: string };
      password: { value: string };
    };
    const email = target.email.value; // 타입 검사됨!
    const password = target.password.value; // 타입 검사됨!
    // 등등...
  }}
>
  <div>
    <label>
      이메일:
      <input type="email" name="email" />
    </label>
  </div>
  <div>
    <label>
      비밀번호:
      <input type="password" name="password" />
    </label>
  </div>
  <div>
    <input type="submit" value="로그인" />
  </div>
</form>