Typescript interface designed for objects containing certain optional property names as well as unspecified property names

Question

Typescript interface designed for objects containing certain optional property names as well as unspecified property names

I am looking to design an interface for an object that can have optional properties with specific names, as well as accept properties with arbitrary names. Here is my approach:

interface CallBack {
  onTransition?(): any; // option A
  [key: string]: () => any; // option B
}

However, when testing this setup, I encountered the following error:

Property 'onBeforeTransition' of type '(() => any) | undefined' is not assignable to string index type '() => any'

. I understand that this essentially means the same thing as:

interface CallBack {
  [key: string]: () => any;
}

The reason behind wanting this feature is to improve editor assistance when defining callbacks. Is there a way to achieve this desired functionality?

typescript typescript-typings

Answer 1

Answer №1

To ensure safety, consider setting the return type of the index signature as (() => any) | undefined. This approach is recommended since accessing the object with a string will likely result in a function or undefined, requiring careful validation.

interface CallBack {
    onTransition?(): any; 
    [key: string]: (() => any) | undefined;
}

Answer 2

To ensure safety, consider setting the return type of the index signature as (() => any) | undefined. This approach is recommended since accessing the object with a string will likely result in a function or undefined, requiring careful validation.

interface CallBack {
    onTransition?(): any; 
    [key: string]: (() => any) | undefined;
}

Typescript interface designed for objects containing certain optional property names as well as unspecified property names

Answer №1

Similar questions

I'm puzzled as to why I am unable to invoke a class method within this callback function. The error message indicates a TypeError: 'this' is undefined

NestJS is having trouble importing generated types from the Prisma client

Dealing with a nested object problem in Angular using TypeScript

What are the solutions for handling undefined data within the scope of Typescript?

Discovering the most recent 10 date elements in a JSON object within a React application

What is the best way to create TypeScript declarations for both commonjs modules and global variables?

Passing both the object and its attributes simultaneously for reflect-metadata in TypeScript is a feature that closely resembles functionality found

Unable to inject basic service into component

Create an eye-catching hexagon shape in CSS/SCSS with rounded corners, a transparent backdrop, and a

Mastering Interpolation in React with TypeScript is essential for creating dynamic and interactive UI components. By leveraging the

The JSON object cannot be assigned to the IntrinsicAttributes and customType data types

Angular 2: Issue with Table not Being Updated

Methods for transforming a TypeScript class instance containing getter/setter properties into a JSON format for storage within a MySQL database

The type 'string' cannot be utilized to index type

What methods are available to keep a component in a fixed position on the window during certain scrolling intervals?

What is the best way to handle closing popups that have opened during an error redirection

Discover the location of the class definition in VSCode with this helpful clue

Error: The promise was not caught due to a network issue, resulting in a creation error

calculate the difference between two dates and then add this difference to a new date

Exploring the functionality of Typescript classes in a namespace through Jest testing