Create a constant object interface definition

Question

Create a constant object interface definition

Is there a way to create an interface for an object defined with the as const syntax?

The Events type does not work as intended and causes issues with enforcement.

const events = { // how can I define an interface for the events object?
    test: payload => console.log(payload),
    another: payload => console.log(payload)
} as const;

type Events = { [key: string]: (payload: Payload) => void }; // this approach does not work for events object
type Payload = { [key: string]: any };
type EventName = keyof typeof events;

const emit = (event: EventName, payload: Payload) => {
    events[event]?.(payload); 
} // (parameter) event: "test" | "another"

emit('foo', { test: 1 }); // Argument of type '"foo"' is not assignable to parameter of type '"test" | "another"'.

View TS Playground

typescript

Answer 1

Answer №1

To ensure the correct parameters type for the function emit, you can abstract an interface from the shape of the events object:

// Defining the events object.
// Specify the payload type if it's not `any`.
const events = {
    test: (payload: any) => console.log(payload),
    another: (payload: {test:number}) => console.log(payload),
} as const;

// Extract event names from the object keys.
type EventName = keyof typeof events;

// Determine the payload type for each event.
// `Parameters` extracts the function parameters and returns them as an array.
// Ex: Parameters<(a: string, b: number) => void> returns [string, number].
type Payload = { [key in EventName]: Parameters<typeof events[key]>[0] };

// Define the `emit` function with types.
const emit = <T extends EventName>(event: T, payload: Payload[T]) => {
    events[event]?.(payload); 
}

emit('test', {anything: 'can be passed'}); // `test` can take any payload.
emit('another', {test: 2}); // `another` requires an object with a `test` property.
emit('another', {}); // Not specifying the property will result in an error.

playground

If you need to add support for another event, simply include it in the events object.

Answer 2

To ensure the correct parameters type for the function emit, you can abstract an interface from the shape of the events object:

// Defining the events object.
// Specify the payload type if it's not `any`.
const events = {
    test: (payload: any) => console.log(payload),
    another: (payload: {test:number}) => console.log(payload),
} as const;

// Extract event names from the object keys.
type EventName = keyof typeof events;

// Determine the payload type for each event.
// `Parameters` extracts the function parameters and returns them as an array.
// Ex: Parameters<(a: string, b: number) => void> returns [string, number].
type Payload = { [key in EventName]: Parameters<typeof events[key]>[0] };

// Define the `emit` function with types.
const emit = <T extends EventName>(event: T, payload: Payload[T]) => {
    events[event]?.(payload); 
}

emit('test', {anything: 'can be passed'}); // `test` can take any payload.
emit('another', {test: 2}); // `another` requires an object with a `test` property.
emit('another', {}); // Not specifying the property will result in an error.

playground

If you need to add support for another event, simply include it in the events object.

Create a constant object interface definition

Answer №1

Similar questions

Leveraging Promise in conjunction with async/await

Currency symbol display option "narrowSymbol" is not compatible with Next.Js 9.4.4 when using Intl.NumberFormat

Angular Authentication Functionality

Establishing a Next.js API endpoint at the root level

Dragging element position updated

In Angular 6, triggering a reset on a reactive form will activate all necessary validators

Trouble integrating PDF from REST API with Angular 2 application

Using TypeScript in the current class, transform a class member into a string

What could be the reason for the component not receiving data from the service?

Steer clear of chaining multiple subscriptions in RXJS to improve code

Is there a way to monitor user engagement within my app without depending on external analytics platforms?

There is an issue with the Angular Delete request functionality, however, Postman appears to be

The bar chart functions perfectly on localhost but encounters issues after being hosted on Gitpage

Jest is having trouble recognizing a custom global function during testing, even though it functions properly outside of testing

Function with a TypeScript Union Type

Arranging Pipe Methods in RxJS/Observable for Optimal Functionality

Is it possible to update input form fields in an Angular application?

Issue in TypeScript: The module "*.svg" does not have a component that is exported named "ReactComponent"

Typescript: The type 'X' does not correspond with the signature '(prevState: undefined): undefined' in any way

Typescript not being transpiled by Webpack