Event Types Annotating Event Types
Last updated: 2026-11-02
Event Types Annotating Event Types
Event types come from @types/react: onClick is typed as MouseEvent<HTMLButtonElement> and onChange as ChangeEvent<HTMLInputElement>. Once they are annotated, currentTarget offers precise hints about the element you are working with instead of a generic Element. Annotating an inline handler is optional, because the JSX attribute already provides the type for you. For a handler you pull out into its own function, write the annotation by hand and the editor keeps checking it for you.
| Group | Data & Engineering |
|---|---|
| Kind | Pattern |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
function SearchBox() {
const [kw, setKw] = useState('')
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setKw(e.currentTarget.value) // currentTarget is inferred as HTMLInputElement
}
const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
e.preventDefault()
}
return (
<form onSubmit={onSubmit}>
<input value={kw} onChange={onChange} />
</form>
)
}
// The inline form needs no annotation: onChange={e => setKw(e.target.value)} - e is inferredReturns：No return value; this is a coding pattern rather than a callable API.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
Typing logs ChangeEvent<HTMLInputElement> and clicking logs MouseEvent<HTMLButtonElement>, with the last four entries listed below - at runtime these are ordinary events, the TypeScript annotations live in the syntax block.💡 Key Points
🏷️ More Data & Engineering
💡 Related Cases
📚 Related Tutorials
❓ FAQ
