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

Posted

技术标签:

【中文标题】对类方法使用胖箭头语法时,我可以使用 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()

【讨论】:

以上是关于对类方法使用胖箭头语法时,我可以使用 TypeScript 重载吗?的主要内容,如果未能解决你的问题,请参考以下文章

如何配置ESLint以允许胖箭头类方法

CoffeeScript:如何同时使用胖箭头和 this?

CoffeeScript:如何使用胖箭头和这个?

在javascript中使用严格不适用于胖箭头?

如何使用咖啡脚本使用`this`和`_this`(胖箭头)?

如何在 CoffeeScript 胖箭头回调中引用实际的“this”?