问答

typescript class中的函数重载

作者:admin 2021-04-20 我要评论

class Box{ size = (width?: number, height?: number) = { // ... }}size(width, height): voidsize(): [number, number] Box中的size方法我想实现有入参就设置...

在说正事之前,我要推荐一个福利:你还在原价购买阿里云、腾讯云、华为云服务器吗?那太亏啦!来这里,新购、升级、续费都打折,能够为您省60%的钱呢!2核4G企业级云服务器低至69元/年,点击进去看看吧>>>)
class Box{
    size = (width?: number, height?: number) => {
        // ...
    }
}
size(width, height): void
size(): [number, number]

Box中的size方法我想实现有入参就设置 没参数就返回数值
这个size的类型该怎么去写 在哪写
并且不想用size(){}这样的方式 这样打包会挂在proto上

###

用 interface 先把函数类型定义好呗,然后类里面直接用这个类型定义 size 。

interface 可以定义函数,也可以定义重载函数。

###

我觉得你是想声明重载函数的类型,可以这样声明:

interface SizeAccessor {
    (width: number, height: number): void;
    (): [number, number];
}

我的课程《TypeScript从入门到实践「2021版」》中有讲到使用接口来声明函数类型的方法:

image.png

不过,对于你这个问题,却可能做不到。在 TypeScript 中,箭头函数是不能声明重载的(因为是箭头函数直接写的实现,推断出来的函数类型;而重载函数必须要专门声明),所以虽然可以声明 BoxsizeSizeAccessor 这种重载函数类型:

class Box {
    size?: SizeAccessor;
}

但是,却不能直接用箭头函数给他赋值

class Box {
    size: SizeAccessor = (width?: number, height?: number) => { ... }
    //                 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    //                 要报类型错误,比没法推导出一个重载函数类型
}

解决办法是把箭头函数强制转换一下(不太优雅,但能解决问题)

class Box {
    size: SizeAccessor = ((width?: number, height?: number): void | [number, number] => { }) as SizeAccessor;
    //                   ^                                                                 ^^^^^^^^^^^^^^^^^^
}

其实这里转换成 any 也是可以的,反正 size 已经声明为 SizeAccessor 类型,后面使用都是按 SizeAccessor 来提示:

image.png

###

写一个getSize一个setSize两个方法就好了呀

非要的话,这样写?

  size = (width?: number, height?: number) => {
    if(typeof(width) !== 'undefined' && typeof(height) !== 'undefined'){
        return size(width,height);
    }
    return size();
  }
###

试试这个?

class Box {
  private width: number = 0
  private height: number = 0

  size(): [number, number]
  size(width: number, height: number): void

  size(width?: number, height?: number): void | [number, number] {
    if (width !== undefined && width !== null && height !== undefined && height !== null) {
      this.width = width
      this.height = height
      return
    }

    return [this.width, this.height]
  }
}

const box = new Box()

box.size()
box.size(10, 40)

无参数提示:
image

有参数提示:
image

版权声明:本文转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。本站转载出于传播更多优秀技术知识之目的,如有侵权请联系QQ/微信:153890879删除

相关文章
  • nginx响应速度很慢

    nginx响应速度很慢

  • 点击选中的多选框,会在已选那一栏显示

    点击选中的多选框,会在已选那一栏显示

  • PHP 多态的理解

    PHP 多态的理解

  • 关于C语言中static的问题

    关于C语言中static的问题

腾讯云代理商
海外云服务器