Typing Components

Props are just an object type, and typing them is nearly all there is to TypeScript in React.

The callback props are where the compiler earns its keep: passing the wrong argument to onSelect becomes a compile error rather than a runtime surprise three components away.

The onSelect signature does not match: the prop promises a string and this takes a number. That is the class of bug that used to survive until somebody clicked.

A few React-specific types.

React.ReactNode for anything renderable, which is what children usually is.

React.ChangeEvent<HTMLInputElement> for an input's change handler.

React.FormEvent for a submit handler.

useRef<HTMLInputElement>(null) so .current.focus() checks.

React.FC is no longer recommended. Type the props parameter directly.