typescript class中的函数重载

hold_baby
  • 2.9k
class Box{
    size = (width?: number, height?: number) => {
        // ...
    }
}
size(width, height): void
size(): [number, number]

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

回复
阅读 1.1k
4 个回答

用 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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏