关于typescript：在接口中设置构造函数


Set constructor in interface

我有一个接口和一个实现它的类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
export interface ITooltip {
    new(elem: HTMLElement, options?: ITooltipOptions);
    show(): void;
    hide(): void;
    toggle(): void;
}

export class Tooltip implements ITooltip {

    constructor(private  elem: HTMLElement, private options?: ITooltipOptions) {
    }

    ....
}

但在控制台中，我有一个错误：

1
2
Class 'Tooltip' incorrectly implements interface 'ITooltip'.
  Type 'Tooltip' provides no match for the signature 'new (elem: HTMLElement, options?: ITooltipOptions): any'

我不明白为什么会发生这个错误。

据我所知，您不能组合类实现的接口和类构造函数接口。

这工作：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
export interface ITooltip {
    show(): void;
    hide(): void;
    toggle(): void;
}

export type TooltipConstructor = { new(elem: HTMLElement, options?: ITooltipOptions): Tooltip };

export class Tooltip implements ITooltip {
    constructor(private  elem: HTMLElement, private options?: ITooltipOptions) {}

    show(): void {}
    hide(): void {}
    toggle(): void {}
}

(操场代码)

相关讨论

您的代码中有一些东西：

首先，在typescript中，类必须提供接口中定义的所有字段和函数。这有时会很乏味。如果您希望避免这种情况，并且它不会破坏您的结构，那么您可以使用扩展而不是实现，然后就不需要重新定义所有内容了。

其次，在接口中不声明构造函数声明。所以应该去掉new(....的句子。

您的代码最终将类似于这样：

1
2
3
4
5
6
7
8
9
10
11
12
export interface ITooltip {
    show(): void;
    hide(): void;
    toggle(): void;
}

export class Tooltip implements ITooltip {
    constructor(elem: HTMLElement, options?: ITooltipOptions) {};
    show(): void {};
    hide(): void {};
    toggle(): void {};          
}

不管怎样，我建议你先阅读排版的文档来理解这些概念。

相关讨论