Creating an Array of Callbacks in TypeScript

How do you define an array of callback functions in TypeScript?

Here's how a single callback function looks like:

var callback:(param:string)=>void = function(param:string) {};

To declare an array of callbacks, you might try this:

var callback:(param:string)=>void[] = [];

However, this can cause confusion as it could be interpreted as an array of callbacks or a single callback that returns an array of voids.

When tested in the TypeScript playground, it is treated as an array of voids. One possible solution might be to use parentheses:

var callback:((param:string)=>void)[] = [];

Unfortunately, this approach doesn't seem to work either.

Do you have any other suggestions?

Answer №1

In order to properly declare the type literal syntax, you should use the following format:

var callback:{(param:string): void;}[] = [];

While this syntax may appear cumbersome, you have the option to assign it a name for clarity:

interface fn {
    (param: string): void;
}
var callback2: fn[] = [];

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Encountering an error when using Jest and the envalid library to test a React application: process.exit invoked with code "1"

While testing my React/Typescript application with Jest, I encountered an error. I am utilizing the envalid library to manage my environment variables with types and autocompletion: const ENV = cleanEnv(process.env, { | ^ 6 | R ...

What is the best way to determine the highest value?

How can I ensure that the data is displayed based on the condition c.date <= this.selectedReport.report_date? The current code snippet if (Math.max(...this.costs.map(c => c.date))){} seems to be causing an issue where no data is being displayed. What ...

The confusion arises from the ambiguity between the name of the module and the name of

In my current scenario, I am faced with the following issue : module SomeName { class SomeName { } var namespace = SomeName; } The problem is that when referencing SomeName, it is pointing to the class instead of the module. I have a requireme ...

The TypeScript declarations for the scss module are malfunctioning

Just recently, I set up a React project using rollup. Below is the configuration file for my rollup setup: rollup.config.js import serve from "rollup-plugin-serve"; import livereload from "rollup-plugin-livereload"; import babel from &q ...

What is the best way to include a JArray within a JObject without introducing a new key or name for the JArray?

In my .NET C# project, I am attempting to create a new JObject from a JArray. The goal is to retrieve test data for data-driven testing from a FetchData JObject. Here is the code snippet I have developed so far: public static JObject FetchData(string testM ...

Is there a way to automatically determine the parameters of a constructor to match the default class type in TypeScript

I need a function in a class that can utilize a type from constructor arguments, but I am unsure how to achieve this. class CustomClass<Type1, Type2=any>{ a: string = 'a' constructor(private readonly parameters: { attributes: Type ...

Confirm the object received from the API and assign default values

Seeking to extract data from an API and verify if all fields are strings, but if they are missing I aim to assign default values. My intention was to utilize the yup library to validate the object accordingly, ensuring that the returned function is prope ...

Getting the Final Matching Value of X in a JSON Array

I'm in need of extracting the 'num' value when the most recent 'observed' equals "observed" from the response below (e.g. the one before 'estimated'). The API returns updated values, switching the next 'estimated&ap ...

Is it possible to implement a customized pathway for the functions within an Azure function app?

Recently, I set up a new function app on Azure using Azure Functions Core Tools with Typescript as the language. The app includes a test function named MyTestFunction that responds with an HTTP response when called. This particular function is located in ...

Retrieve the initial token from a union, referred to as an "or list," in Typescript

Is there a way to define a generic type F with the following behavior: type X = F<'a'|'b'|'c'> should result in X being 'a'. And if type X = F<'alpha'|'beta'|'gamma'|'del ...

The function 'ShouldWorkController' was expected but is not defined, receiving undefined instead

Whenever I attempt to connect a controller to a template using the angular-ui-router $stateProvider, I encounter this error message: 'ShouldWorkController' is not a function. Got undefined. Surprisingly, when I define the controller within the ...

Having trouble integrating Azure with my Ionic2/Angular2/Cordova app

I am currently developing with the Ionic2 Blank app template. I encountered an issue when trying to set up Azure using the following line of code in home.ts: import azureMobileClient from 'azure-mobile-apps-client'; . The deployment process wen ...

Employing square bracket notation based on the input data

I'm currently in the process of enhancing some code within my library, but I've encountered a perplexing issue with bracket notation not functioning as expected when attempting to call an imported class. The parameter type expects a camelCased s ...

Tips for excluding test files in next.js when building

I am currently developing a next.js application with tests integrated within the page directory structure. In order to achieve this, I have made necessary configurations in the next.config.js file. const { i18n } = require('./next-i18next.config' ...

How can I modify my Axios Post request to receive a 201 status code in order to successfully save the data?

I am facing an issue when attempting to make a POST request locally with Axios on my NodeJS front-end app to my .NET core local server. The server returns a 204 status code and the axios request returns a pending promise. How can I change this to achieve a ...

Retrieve the array from the object only if it includes a specific string using jQuery

Using regex, I am able to query all square brackets in a string with the following command: var sizecolor = textvalue.match(/[^[\]]+(?=])/g); If the object above contains "SPrice", I want to retrieve the square bracket. For example: If my string lo ...

I'm stuck trying to figure out all the parameters for the MapsPage component in Angular 2

Currently, I am utilizing Angular2 with Ionic2 for my mobile app development. Everything was working flawlessly until I decided to incorporate a new module for Google Maps navigation. Specifically, I am using phonegap-launch-navigator for this purpose. The ...

Iterating through an array in Javascript to create a new array filled with objects

Is there a way to iterate through an array of strings and convert them into an array of objects based on their values? For instance, if the array looks like this: [a,a,a,b,b,c,d] I aim to cycle through the array and create objects with key-value pairs t ...

Activate function on Ctrl + K in a React TypeScript project

I am currently developing a React TypeScript application using version v18.2.0. My goal is to trigger a function when the user simultaneously presses Ctrl + K. Here is the code snippet within my component: const keyDownHandler = (event: KeyboardEvent) =& ...

Tips for navigating the material ui Expanded attribute within the Expansion Panel

After looking at the image provided through this link: https://i.stack.imgur.com/kvELU.png I was faced with the task of making the expansion panel, specifically when it is active, take up 100% of its current Div space. While setting height: 100% did achi ...