Summary  
This chapter explains how to type React event handlers in TypeScript—using interfaces like React.ChangeEvent<HTMLInputElement> and React.FormEvent<HTMLFormElement>—to safely access input values and control form submissions.

General domain of usage  
Handling form and input events in user interfaces.

In React, events are used to handle user actions like typing or submitting forms.
In TypeScript, you define **what kind of event you are working with**, so you can safely access its values.

### Typing Input Change Event
```tsx
function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}
```
- `event` comes from an `<input>`;
- `value` is available and correctly typed.
Using with `input`:
```tsx
<input onChange={handleChange} />
```

### Typing Form Submit Event
```tsx
function handleSubmit(event: React.FormEvent<HTMLFormElement>) {
  event.preventDefault();
}
```
- used for form submission;
- `preventDefault()` stops page reload.

Using with `form`:
```tsx
<form onSubmit={handleSubmit}>
  <button type="submit">Submit</button>
</form>
```

Type events based on the element they come from, so you can safely access their properties.

Explore how TypeScript adds type safety and structure to modern React applications. Work with core types, interfaces, and generics to model data and build reliable components. Apply TypeScript in real scenarios by typing props, state, and API data to prepare for scalable Next.js development.

Typing Events (Forms and Inputs)

Typing Input Change Event

Typing Form Submit Event

Typing Events (Forms and Inputs)

Typing Input Change Event

Typing Form Submit Event