ts对象函数的重载怎么写？

Question

type Test = {
  o1(num:number):number;
  o1(num:number,flag:boolean):number[];
}

const OTest:Test = {
  o1(num:number):number
  o1(num:number,flag:boolean):number[]
  o1(num:number,flag:boolean){
    if(flag){
      return [num]
    }else{
      return num
    }
  }
}

这样写的话会报错

即使写了,也会报别的错

因为OTest这个对象其实是传递给库的配置对象，所以须为对象的形式

如果不使用函数重载的方式，能否实现像函数重载的功能，不然如果将返回值定为联合类型，接收的时候都要断言成某种类型就很头疼。。

Answer 1

type Test = {
  o1(num: number, flag?: boolean): number | number[];
};

class OTest implements Test {
  o1(num: number): number;
  o1(num: number, flag: boolean): number[];
  o1(num: number, flag?: boolean): number | number[] {
    if (flag) {
      return [num];
    } else {
      return num;
    }
  }
}

const testInstance = new OTest();
console.log(testInstance.o1(1)); // 输出: 1
console.log(testInstance.o1(1, true)); // 输出: [1]

Answer 2

对象字面量无法直接支持方法的重载
所以只能绕一绕来实现了

// * 先使用调用签名把重载的函数实现了
type TOverloadFn = {
  (num:number):number;
  (num:number,flag:boolean):number[];
}

function OverloadFn(num: number): number;
function OverloadFn(num: number, flag:boolean): number[];
function OverloadFn(num: number, flag?:boolean): number | number[] {
  if(flag){
    return [num]
  }else{
    return num
  }
}

// * 再把实现了重载的函数写进去
type Test = {
  o1:TOverloadFn
}

const OTest:Test = {
  o1:OverloadFn
}

Answer 3

阮老师教程
https://wangdoc.com/typescript/function#%E5%87%BD%E6%95%B0%E9...

interface  Test{
  o1(num: number, flag?: boolean): number | number[];
}

class OTest implements Test {
  o1(num:number,flag?:boolean):number[] | number{
    if(flag){
      return [num]
    }else{
      return num
    }
  }
}

const testInstance = new OTest();
testInstance.o1(1)
testInstance.o1(1,true)


class OTest1{
  o1(num:number):number
  o1(num:number,flag:boolean):number[]
  o1(num:number,flag?:boolean):number[] | number{
    if(flag){
      return [num]
    }else{
      return num
    }
  }
}
const testInstance2 = new OTest1();
testInstance2.o1(1)
testInstance2.o1(1,true)