What Is the Type of Event in TypeScript?

In modern web development, TypeScript adds a critical layer of safety and clarity to JavaScript — especially when working with DOM events. While JavaScript treats events loosely as objects, TypeScript enforces strict type definitions that help developers write more predictable, maintainable code.

When you attach an event listener in TypeScript, you’re not just responding to user interactions — you’re interacting with a well-defined set of types that tell the compiler exactly what kind of event is being handled and what properties are available.

Events in TypeScript: The Basics

In the browser, every interaction—clicks, key presses, mouse moves, form submissions—is represented by an event object. TypeScript gives these event objects specific types, depending on their context.

For instance:

const button = document.querySelector('button');

button?.addEventListener('click', (event) => {
  console.log(event); // event has type MouseEvent
});

In this example, TypeScript automatically infers the type of event as MouseEvent, because the "click" event always corresponds to that specific event type. This inference is part of the TypeScript DOM type definitions built into the language.

If you hover over event in a modern IDE like VS Code, you’ll see:

(parameter) event: MouseEvent

This typing gives developers autocompletion for properties such as event.clientX, event.clientY, and event.button, while preventing access to unrelated ones (like event.key from a keyboard event).

Common Event Types

TypeScript’s DOM library defines dozens of specialized event types under the lib.dom.d.ts file. The most common include:

MouseEvent – for mouse interactions such as click, mousedown, mousemove, mouseup.
KeyboardEvent – for key presses, like keydown and keyup.
InputEvent – for user input in form fields.
SubmitEvent – for form submissions.
FocusEvent – for focus and blur events on inputs.
TouchEvent – for touch interactions on mobile devices.
WheelEvent – for mouse wheel scrolling.

Each event type extends the base Event interface, adding properties specific to its context. For instance, KeyboardEvent includes .key and .code, while MouseEvent adds .button and .pageX.

Explicit Typing for React and Frameworks

In frameworks like React, the event system differs slightly because React uses a synthetic event wrapper for performance and cross-browser consistency. TypeScript provides specialized event types for React components via the React namespace:

function handleChange(event: React.ChangeEvent<HTMLInputElement>) {
  console.log(event.target.value);
}

Here, React.ChangeEvent<HTMLInputElement> ensures TypeScript knows both the event type (ChangeEvent) and the target element type (HTMLInputElement).

Common React event types include:

React.MouseEvent<T>
React.KeyboardEvent<T>
React.FormEvent<T>
React.ChangeEvent<T>

By explicitly defining these types, developers can catch common errors — like trying to access an input value from a non-form element.

Custom Events

TypeScript also supports custom event types for advanced scenarios, especially in applications using Web Components or message-based architectures.

const myEvent = new CustomEvent<string>('userLogin', {
  detail: 'User123'
});

document.dispatchEvent(myEvent);

Here, the event type is CustomEvent<string>, with the generic parameter describing the type of detail data it carries. When handling the event, TypeScript ensures that event.detail has the correct type.

Why Event Typing Matters

TypeScript’s event types aren’t just about autocompletion — they enforce predictability. By defining exactly which properties belong to which events, developers avoid runtime errors and reduce the cognitive load of remembering what’s available on each event object.

As web apps become more interactive and complex, the ability to model interactions precisely is critical. From mouse movements to API-driven custom events, TypeScript’s type system ensures that every user action flows through predictable, verifiable code paths.

The Bottom Line

In TypeScript, the type of an event depends on the context — mouse, keyboard, input, or custom — but all derive from the base Event interface. This structure provides safety, consistency, and rich tooling support, allowing developers to focus on behavior rather than boilerplate.

Whether building a simple button click handler or a full React form component, understanding how TypeScript models events is one of the keys to writing reliable, professional-grade front-end code.

Accessing Japanese mobile content often requires a reliable local proxy. A Japanese mobile proxy server from Floppydata ensures location accuracy and smooth connection. Useful for testing, SEO tasks, or browsing as if from Japan.

Matt