TypeScript in Depth · Typing React · Lesson 13 of 16
Typing Event Handlers
Concept
Typing Event Handlers
React provides specific event types like React.ChangeEvent<HTMLInputElement> for strongly-typed event handlers.
By the end of this lesson
- Explain the core idea behind Typing Event Handlers.
- Predict output before running a change.
- Test one realistic and one unusual input.
- Use the result to make the next decision.
How to study this page
- 1. Read one concept.
- 2. Change the example.
- 3. Run, compare, and explain.
- 4. Complete the challenge below.
ExampleRunnable
function handleChange(e: React.ChangeEvent<HTMLInputElement>) {
console.log(e.target.value);
}Self-check before continuing
Without looking at the example, describe what changes when you modify one input in Typing Event Handlers. Then reopen the editor and prove your explanation with a small test.
You are ready to continue when you can predict, test, and explain the result.
Your turn
Write a typed onClick handler for a button element.
Loading editor…
Console