Verify the data type received from the event emitter

Question

Verify the data type received from the event emitter

I want to develop a strict event emitter for TypeScript, but I'm not sure if it can be done.

Let's say I create a listener for my emitter:

// define listener
@listen('my-custom-event')
function userListener(data: IUser){
  // handle data
}

In this case, I hope TypeScript will verify that the data being sent is of type IUser.

// success case
myEmitter.emit('my-custom-event', myUser as IUser);

// should result in an error
myEmitter.emit('my-custom-event', myNonUser);

Can this be achieved?

typescript

Answer 1

Answer №1

Indeed, it is achievable. There is a way in Typescript to validate method types during the compilation phase. The key is to establish a mapping between event names and their corresponding types. Review the code snippet provided below for implementation details.


interface User {
  name: string
}

type EventMap = {
  'my-custom-event': User;
  'my-custom-event-2': number;
}

export class Emitter {
  emit<T extends keyof EventMap>(eventName: T, arg: EventMap[T]) {
    console.log(eventName, arg)
  }
}

const myEmitter = new Emitter

myEmitter.emit('my-custom-event', {name: 'Henry'}) // This operation succeeds

myEmitter.emit('my-custom-event', {age: 10}) // This operation fails at compile time as expected

Answer 2

Indeed, it is achievable. There is a way in Typescript to validate method types during the compilation phase. The key is to establish a mapping between event names and their corresponding types. Review the code snippet provided below for implementation details.


interface User {
  name: string
}

type EventMap = {
  'my-custom-event': User;
  'my-custom-event-2': number;
}

export class Emitter {
  emit<T extends keyof EventMap>(eventName: T, arg: EventMap[T]) {
    console.log(eventName, arg)
  }
}

const myEmitter = new Emitter

myEmitter.emit('my-custom-event', {name: 'Henry'}) // This operation succeeds

myEmitter.emit('my-custom-event', {age: 10}) // This operation fails at compile time as expected

Verify the data type received from the event emitter

Answer №1

Similar questions

Guide on transforming an array of objects into a fresh array

Is it Control or ControlGroup in Angular 2 - How to tell the difference?

What is the best way to create a jumping animation for an object in Cannon.js and Three.js?

An error occurred: The property 'toUpperCase' cannot be read of an undefined Observable in an uncaught TypeError

Puppeteer: What is the best way to interact with a button that has a specific label?

Stringified HTML code showcased

Angular 6 Checkbox Selector - Filtering Made Easy

Executing a TypeScript function through a package.json script: A guide

Utilizing Jest and nest.js for testing with absolute paths

Retrieve the document id along with the corresponding data from a collection

Enable automatic conversion of interfaces to JsonData

Webpack 5: Updating the file path for TypeScript declaration files

Encountering the issue: "Unable to establish validator property on string 'control'"

Using TypeScript and Angular to modify CSS properties

What causes the distinction between entities when accessing objects through TestingModule.get() and EntityManager in NestJS?

Sending SMS from an Angular application to mobile devices can be achieved through several methods

What is the term for specifying a variable's data type using a set of values instead of a traditional type?

Having trouble assigning a value of `undefined` to a TextField state in React hook

React with TypeScript: Initial submission results in an empty array

Converting UK DateTime to GMT time using Angular