对类方法使用胖箭头语法时，我可以使用 TypeScript 重载吗？

Posted 2023-03-03

【中文标题】对类方法使用胖箭头语法时，我可以使用 TypeScript 重载吗？

【英文标题】：Can I use TypeScript overloads when using fat arrow syntax for class methods?

【发布时间】：2014-01-05 22:11:20

【问题描述】：

我已经从传统形式转换了一些类：

class TestOverloads 
    private status = "blah";
    public doStuff(selector: JQuery);
    public doStuff(selector: string);
    public doStuff(selector: any) 
        alert(this.status);
    

改为使用箭头函数表达式：

class TestOverloads2 
    private status = "blah";
    public doStuff = (selector: any) => 
        alert(this.status);
    

以避免在回调中使用类方法时出现范围界定问题（背景见here）。

我不知道如何重新创建我的重载函数签名。使用粗箭头时如何编写重载？

【问题讨论】：

不要在方法中使用粗箭头。它将成为类的属性，而不是原型方法。

【参考方案1】：

您可以为函数支持的调用签名编写内联类型文字：

class TestOverloads2 
    private status = "blah";
    public doStuff: 
        (selector: JQuery): void;
        (selector: string): void;
     = (selector: any) => 
        alert(this.status);
    

这有点可怕，因此您可能希望将其提取到界面中：

interface SelectByJQueryOrString 
    (selector: JQuery): void;
    (selector: string): void;


class TestOverloads3 
    private status = "blah";
    public doStuff: SelectByJQueryOrString = (selector: any) => 
        alert(this.status);
    

【讨论】：

接口类型注解是个好主意。

注意：在了解这一点时，我遇到了这个 TS Dos and Donts：typescriptlang.org/docs/handbook/declaration-files/… 在页面底部的使用联合类型部分，它提到使用联合来处理单位置重载。所以在这个例子中，定义是selector: JQuery|string): void。我想知道，实际实例是否也应该是联合而不是any？ - ... = (selector: JQuery|string) => alert...

如果我在没有命名接口属性的情况下尝试这种语法，它会在实现类中抛出一个错误，说它错误地实现了接口（没有签名匹配）。

正如@user4275029 提到的，您应该使用联合。但要明确：您应该使用联合而不是重载。所以删除重载并执行public doStuff = (selector: JQuery | string) => ...

【参考方案2】：

这有点技术性，但您不再创建函数，而是创建属性（恰好是函数）。

你可以使用命名而不是重载来解决你的问题。

class TestOverloads2 
    private status = "blah";
    public doStuffWithSelector = (selector: string) => 
        alert(this.status);
    
    public doStuffWithJqueryObject = (jqo: JQuery) => 
        alert(this.status);
    

如果存在大量重复，您可以将其放在两个命名函数调用的通用函数中，例如：this.sharedStuff()。