Typing State and Events

const [count, setCount] = useState(0);                 // inferred: number

type User = { id: number; name: string };
const [user, setUser] = useState<User | null>(null);    // explicit: can be null
const [users, setUsers] = useState<User[]>([]);

if (user) console.log(user.name);                       // must check for null first

function SearchForm() {
  const [q, setQ] = useState('');

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => setQ(e.target.value);
  const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    console.log(q);
  };
  const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => console.log(e.clientX);

  return (
    <form onSubmit={handleSubmit}>
      <input value={q} onChange={handleChange} />
      <button onClick={handleClick}>Search</button>
    </form>
  );
}