# typed-event-target

> EventTarget in the browser but with strong event typing.

Latest version **4.3.4** (published 2026-09-15) · (MIT OR CC0-1.0) license · 0 weekly downloads

## Install

```sh
npm install typed-event-target
pnpm add typed-event-target
yarn add typed-event-target
bun add typed-event-target
```

## Health

**Score 70/100 (B)** — status: active.

Positive: has types; esm support; no vulnerabilities; recently updated; high maintenance score; high quality score.

Warnings: low downloads.

## Facts

| | |
|---|---|
| Version | 4.3.4 |
| Published | 2026-09-15 |
| First published | 2022-08-27 |
| Weekly downloads | 0 |
| License | (MIT OR CC0-1.0) |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=22 |
| Dependencies | 2 |
| Unpacked size | 44.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | electrovir |
| Maintainers | electrovir |
| Keywords | browser, event-target, EventTarget, type, typed |

## Links

- npm: https://www.npmjs.com/package/typed-event-target
- Repository: https://github.com/electrovir/typed-event-target
- Issues: https://github.com/electrovir/typed-event-target/issues
- npm.io page: https://npm.io/package/typed-event-target

## Dependencies (2)

- [@augment-vir/assert](https://npm.io/package/@augment-vir/assert.md) ^32.3.0
- [@augment-vir/common](https://npm.io/package/@augment-vir/common.md) ^32.3.0

## Alternatives

- [@opentelemetry/exporter-zipkin](https://npm.io/package/@opentelemetry/exporter-zipkin.md) — 14.8M weekly downloads
- [pusher-js](https://npm.io/package/pusher-js.md) — 2.0M weekly downloads
- [browserify](https://npm.io/package/browserify.md) — 1.7M weekly downloads
- [sqs-consumer](https://npm.io/package/sqs-consumer.md) — 1.7M weekly downloads
- [@sanity/eventsource](https://npm.io/package/@sanity/eventsource.md) — 930.8K weekly downloads

## Recent versions

- 4.3.4 (latest) — 2026-09-15
- 4.3.3 — 2026-08-05
- 4.3.2 — 2026-07-01
- 4.3.1 — 2026-06-04
- 4.3.0 — 2026-03-08
- 4.2.0 — 2026-03-05
- 4.1.0 — 2025-05-17
- 4.0.4 — 2025-05-02
- 4.0.3 — 2025-03-04
- 4.0.2 — 2024-11-07
- 4.0.1 — 2024-11-07
- 4.0.0 — 2024-09-28
- 3.4.0 — 2024-04-19
- 3.3.0 — 2024-04-13
- 3.2.1 — 2024-03-28
- … 18 more at https://npm.io/package/typed-event-target/versions

## README

# typed-event-target

This package provides a strongly typed `EventTarget` sub class. Provided types pass down to event listeners and place requirements on event dispatching.

## Usage

```bash
npm i typed-event-target
```

### TypedEventTarget

Extend `TypedEventTarget` to create your own event target with specific types, or just use it to add types to an existing event target.

<!-- example-link: ./src/readme-examples/my-event-target.example.ts -->

```TypeScript
import {TypedEventTarget} from 'typed-event-target';
import {type MyEvent1, type MyEvent2} from './typed-events.example.js';

export class MyTypedEventTarget extends TypedEventTarget<MyEvent1 | MyEvent2> {}
```

<!-- example-link: ./src/readme-examples/adding-types.example.ts -->

```TypeScript
import {type TypedEventTarget} from 'typed-event-target';
import {type MyEvent1, type MyEvent2} from './typed-events.example.js';

export const nowWithTypes = new EventTarget() as TypedEventTarget<MyEvent1 | MyEvent2>;
```

In the end, `nowWithTypes` will be functionally equivalent to any new instance of `MyEventTarget` (`new MyEventTarget())` because `MyEventTarget` is a sub-class of `EventTarget` with nothing extra but type information. (Though of course, `nowWithTypes` won't be an instance of `MyEventTarget` because `MyEventTarget` is a separate run-time class.)

Instances of `TypedEventTarget` can be used just like any instance of `EventTarget`:

<!-- example-link: ./src/readme-examples/event-target-usage.example.ts -->

```TypeScript
import {MyTypedEventTarget} from './my-event-target.example.js';
import {MyEvent1} from './typed-events.example.js';

const myInstance = new MyTypedEventTarget();

function myListener(event: MyEvent1) {
    console.info(event);
}

myInstance.addEventListener(MyEvent1.type, myListener);
myInstance.dispatchEvent(new MyEvent1());
myInstance.removeEventListener(MyEvent1.type, myListener);
```

## Typed Events

You are free to add the `type` property information to your `Event` sub-classes (for passing into `TypedEventTarget`'s generic) however you wish, but this package provides an easy way to do so with `defineTypedEvent`:

<!-- example-link: ./src/readme-examples/typed-events.example.ts -->

```TypeScript
import {defineTypedEvent} from 'typed-event-target';

export class MyEvent1 extends defineTypedEvent('my-event-type-1') {}
export class MyEvent2 extends defineTypedEvent('my-event-type-2') {}
```

## Typed Custom Events

Typed custom events are also provided, so you can add type guards to the data included in your events. Note the extra `()` call after `defineTypedCustomEvent`. This is needed so you don't have to duplicate the Event type information as a function generic.

<!-- example-link: ./src/readme-examples/typed-custom-events.example.ts -->

```TypeScript
import {defineTypedCustomEvent} from 'typed-event-target';

export class MyEvent1 extends defineTypedCustomEvent<string>()('my-event-type-1') {}
export class MyEvent2 extends defineTypedCustomEvent<number>()('my-event-type-2') {}

console.info(
    new MyEvent1({
        detail: 'five',
    }),
);
console.info(
    new MyEvent2({
        detail: 5,
    }),
);
```

---
_Source: https://npm.io/package/typed-event-target · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._