typescript class中的函数重载

Question

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

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

Answer 1

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

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

Answer 2

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

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

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

不过，对于你这个问题，却可能做不到。在 TypeScript 中，箭头函数是不能声明重载的（因为是箭头函数直接写的实现，推断出来的函数类型；而重载函数必须要专门声明），所以虽然可以声明 Box 的 size 是 SizeAccessor 这种重载函数类型：

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 来提示：

Answer 3

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

非要的话，这样写？

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

Answer 4

试试这个？

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)

无参数提示：

有参数提示：