A typed form: ChangeEvent, KeyboardEvent and FormEvent
The script fills the fields and submits. Try it yourself too: type a name, press Escape to clear it, then submit. One handleChange serves all three fields because its event type is a union of the three element types. Caution: the computed key [name] is a plain string, so TypeScript can't check that plan only receives "free" or "pro"; computed keys are a hole in the types.
Inline handlers get their event type for free; separate handler functions use React's event types such as ChangeEvent<HTMLInputElement>, MouseEvent<HTMLButtonElement> and FormEvent<HTMLFormElement>, and event.currentTarget is the typed element the handler is attached to.
Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.
Ready for more? This phase has 5 hands-on exercises with automatic checks.
Practice questions
Write the code in the editor, run it, then open the model answer to compare.
Write a SearchInput with a separate handleChange typed with ChangeEvent<HTMLInputElement> and a handleKeyDown that logs search: <text> when Enter is pressed.
Write a Tabs component with props tabs: string[] and onChange: (index: number) => void, which renders a button per tab and calls onChange with the index.
Explain it without notes
Why don't inline handlers need event types, but separate handler functions do?
What's the difference between e.target and e.currentTarget, and why are they typed differently?
How would you type an onSelect prop and an onClick prop on your own components?
Why can e: MouseEvent fail to match onClick even though the names match?
Preview
Console
Nothing logged yet.Expected console output
submit from <form>: { name: 'Asha', plan: 'pro', bio: 'I like maps' }