Using an array of functions in Typescript: A simple guide

Question

Using an array of functions in Typescript: A simple guide

The code below shows that onResizeWindowHandles is currently of type any, but it should be an array of functions:

export default class PageLayoutManager {

  private $Window: JQuery<Window>;
  private onResizeWindowHandlers: any;

  constructor () {
    this.$Window = $(window);

    this.handleWindowResize();
    this.onResizeWindowHandlers = new Array();
  }

  public addWindowOnResizeHandler(newHandler: any): void {
    this.onResizeWindowHandlers.push(newHandler);
  }

  private handleWindowResize(): void {
    this.$Window.on('resize', () => {
      this.onResizeWindowHandlers.forEach(handlerFunction => {
        handlerFunction();
      })
    });
  }
}

What is the correct way to define the type for onResizeWindowHandles?

https://i.stack.imgur.com/Sad0P.png

typescript

Answer 1

Answer №1

To implement generics in TypeScript, you can utilize the Array and Function classes like so:

private resizeHandlers: Array<Function>;

Answer 2

To implement generics in TypeScript, you can utilize the Array and Function classes like so:

private resizeHandlers: Array<Function>;

Answer 3

Answer №2

Below is the syntax for creating a function using a type alias:

type CustomFunction = (param1: number, param2: string) => boolean

Alternatively, you can define the function using an interface:

interface CustomFunction {
  (param1: number, param2: string): boolean
}

Both approaches are valid, but personally, I find the type alias to be more concise and easy to understand.

In this scenario, using () => void may be the most suitable type since the function doesn't take any arguments and does not have a return value being utilized.

type EventListener = () => void

export default class EventHandler {
  private eventListeners: EventListener[]

  constructor () {
    this.eventListeners = [] // Note: use `[]` instead of `new Array()`
  }

  public addEventListener(newListener: EventListener): void {
    this.eventListeners.push(newListener)
  }
}

You could also use Function as the type, but it's essentially equivalent to (...args: any[]) => any, which lacks type safety and should be used with caution.

Answer 4

Below is the syntax for creating a function using a type alias:

type CustomFunction = (param1: number, param2: string) => boolean

Alternatively, you can define the function using an interface:

interface CustomFunction {
  (param1: number, param2: string): boolean
}

Both approaches are valid, but personally, I find the type alias to be more concise and easy to understand.

In this scenario, using () => void may be the most suitable type since the function doesn't take any arguments and does not have a return value being utilized.

type EventListener = () => void

export default class EventHandler {
  private eventListeners: EventListener[]

  constructor () {
    this.eventListeners = [] // Note: use `[]` instead of `new Array()`
  }

  public addEventListener(newListener: EventListener): void {
    this.eventListeners.push(newListener)
  }
}

You could also use Function as the type, but it's essentially equivalent to (...args: any[]) => any, which lacks type safety and should be used with caution.

Using an array of functions in Typescript: A simple guide

Answer №1

Answer №2

Similar questions

Generating typescript definitions for Polymer 2.4 packages

In Typescript, is it correct to say that { [key: string]: any } is identical to { [key: number]: any }?

Sending a POST request to an API with Angular and passing an object as the payload

What is the best way to implement React ErrorBoundary in conjunction with redux-observable?

Utilizing Angular 10 to Transform a JSON Data into a Custom String for HTML Rendering

The TypeScript script does not qualify as a module

"Enhance your forms with RadixUI's beautiful designs for

What is the functionality of the node class within a doubly linked list?

operating efficiently even when producing an incorrect output type

Instantiate a child class within an abstract class by utilizing the keyword "this"

Tips for utilizing single quotation marks while logging multiple variables in console

Enhancing Security and Privacy of User Information with JWT Tokens and NgRx Integration in Angular Application

Learn how to efficiently disable or enable a button in Angular depending on the selected radio button

Exploring how process.argv in NodeJS can be utilized within JavaScript code compiled by

issue occurring after inserting a new parameter

Use PipeTransform to apply multiple filters simultaneously

Obtaining context from a higher order component in the constructor of a child component: tips and tricks

The use of `super` in Typescript is not returning the expected value

Are all components in Next.js considered client components by default?

What is the best way to explain a function that alters an object directly through reference?