打字稿：如何使用功能数组？

Question

在下面的代码中，onResizeWindowHandles的类型为any，但必须是函数数组：

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();
      })
    });
  }
}

如何正确设置onResizeWindowHandles的类型？

Answer 1

您可以将Array类与泛型中的Function类一起使用，如下所示：

U2, War
Maroon 5, Girls Like You
Ed Sheeran, Perfect

Answer 2

以下是使用类型别名键入函数的语法

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

或者，作为界面：

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

可以的，但是我更喜欢类型别名。更加简洁易读。

在您的情况下，() => void可能是最合适的，因为该函数是在不带参数的情况下调用的，并且返回类型未使用。

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)
  }
}

类型Function在这里也可以使用，但是基本上与(...args: any[]) => any相同，类型不是很安全，通常应避免使用。