Typescript: how I can use array of functons?

Question

In the below code, onResizeWindowHandles has type any, but must be the 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();
      })
    });
  }
}

How I can correctly set the type for onResizeWindowHandles?

HugoTeixeira · Accepted Answer · 2018-07-21 02:20:34Z

2

You can use the Array class with the Function class in the generics, like this:

private onResizeWindowHandlers: Array<Function>;

answered Jul 21, 2018 at 2:20

HugoTeixeira

4,9143 gold badges25 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Takeshi Tokugawa YD Over a year ago

Very laconic solution! Thank you!

kingdaro · Accepted Answer · 2018-07-21 02:21:59Z

Here's the syntax for typing a function, using a type alias

type MyFunc = (arg1: number, arg2: string) => boolean

Alternatively, as an interface:

interface MyFunc {
  (arg1: number, arg2: string): boolean
}

Either work, but I prefer the type alias. It's a little more succinct and readable.

In your case, () => void is probably the most fitting, seeing as the function is being called without arguments, and the return type is unused.

type ResizeHandler = () => void

export default class PageLayoutManager {
  private onResizeWindowHandlers: ResizeHandler[]

  constructor () {
    this.onResizeWindowHandlers = [] // as an aside, use `[]` instead of `new Array()`
  }

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

The type Function would also work here, but it's basically the same as (...args: any[]) => any, which isn't very type safe and should generally be avoided.

Collectives™ on Stack Overflow

Typescript: how I can use array of functons?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related