TS中的方法重载,函数重载,构造器重载

什么叫重载

名字相同 ，参数类型不同

方法重载

方法重载在类中定义多个同名的方法，但是每一个同名的方法要求不同数据类型和不同参数

---

下面来实现一个方法重载 以ArrayList 为例

可以查看数据
可以删除数据 删除可以通过id 或者对象删除
可以获取数据

class ArrayList{

	// 此处为简写	
  constructor(public element: Array<object>){}
/**
不使用简写为
  public element:Array<Object>;
  constructor(element_:Array<Object>){
    this.element = element_
  }
*/

  /**
   * 获取某一个值
   * @param index 
   * @returns 
   */
  get(index:number){
    return this.element[index]
  }
  // 显示值
  show(){
    this.element.forEach(i=>console.log(i))
  }

  // 实现删除方法重载
  remove(val:number):number
  remove(val:Object):Object
  remove(val:number | Object){
    this.element = this.element.filter((e,index)=>{
    
      if(typeof val === 'number'){
          return val !== index
      }else{
        return val !== e
      }
    })
  return val;
  }

}
let a = {name:'zixia',age:12},b= {name:'selfsummer',age:88},c= {name:'自夏',age:18}

let newAr = new ArrayList([a,b,c]);

// console.log(newAr.get(0))
// newAr.show()


console.log('删除的值',newAr.remove(c))
// newAr.show()

函数重载

函数重载或者方法重载适用于某个功能一样，但是细节有不一样
比如说一个函数有多个参数，每一个参数代表不通意义 你个时候就可用使用函数重载

函数重载的定义

1. 一个或多个签名组合叫做函数重载
2. 外部调用函数重载时，稚嫩调用重载的前面 （函数体前面的叫做签名）不能够调用调用使用的函数签名（这个是TS规定的）
3. 调用函数重载时会根据传递的参数来判定调用的那个函数
4. 只有一个函数体吗，只有实现签名配备课函数体，所有重载签名签名只有签名，没有配置函数体

数据定义 以及类型定义

type MessageType = 'Image' | 'audio' | 'video' | string;
type Message = {
	id: number;
	type: MessageType;
	sendMessage: string;
};

// message:Array<Message>  同等下面
let messageList: Message[] = [
	{
		id: 1,
		type: 'video',
		sendMessage: '视频视频',
	},
	{
		id: 2,
		type: 'audio',
		sendMessage: '我是消息',
	},
	{
		id: 3,
		type: 'video',
		sendMessage: '视频视频',
	},

	{
		id: 4,
		type: 'msg',
		sendMessage: 'msgmsh',
	},
	{
		id: 5,
		type: 'Image',
		sendMessage: '图片图片',
	},
];

不使用函数重载 使用联合数据类型

function getMessage(
	value: number | MessageType
): Message | Array<Message> | undefined {
	if (typeof value === 'number') {
		// find 查找数据对应得某一条 返回翻个
		return messageList.find((tyep) => value === tyep.id);
	} else {
		// 返回的是数组
		return messageList.filter((tyep) => tyep.type === value);
	}
}

// console.log(getMessage('video'));  {id: 1,type: 'video',	sendMessage: '视频视频',	}


// 现在需求是 可以找返回的具体某一个字段
// 使用联合类型转换 把getMessage返回类型转化为 Message 这里是上面定义得
// 这里调用方法需要传递 number 类型得 因为find 返回得是一个对象  filter 返回的是一个数组
 let msg = (<Message>getMessage(1)).sendMessage;
 console.log(msg);

函数重载

function loadMessage(value:number):Message; // 重载签名有多个
function loadMessage(value:MessageType):Message[];// 重载签名
// function loadMessage(value:string):Message[] | Message |undefined{ // 第一个重载函数会报错 ，因为产书限定是 string （出错规则是根基第一个签名来匹配参数）
// function loadMessage(value:number):Message[] | Message |undefined{ // 第二个重载函数会报错 ，因为产书限定是 string （出错规则是根基第一个签名来匹配参数）
function loadMessage(value:string|number):Message[] | Message |undefined{ // 正确
  if (typeof value === 'number') {
		// find 查找数据对应得某一条 返回翻个
		return messageList.find((tyep) => value === tyep.id);
	} else {
		// 返回的是数组
		return messageList.filter((tyep) => tyep.type === value);
	}
}
// 按住ctrl + 鼠标左键会定位到 直接对应类型的函数签名

//此函数返回的 Message 数据类型 所有可通过点来获取值
loadMessage(1).sendMessage;

// 此处返回的是Message[] 数据类型 所有能调用数组的所有方法
const infoMas = loadMessage('video');
infoMas.forEach(i=>{console.log(i)})

函数重载签名时候 多个参数不一致时

function newMessage(value:number):Message; // 重载签名有多个
function newMessage(value:MessageType,pageCont:number):Message[];// 重载签名
// function newMessage(value:string|number,pageCont:number = 1):Message[] | Message |undefined{ // 正确

// function newMessage(value:string|number,pageCont?:number):Message[] | Message |undefined{ // 正确
function newMessage(value:string|number,pageCont:number = 1){  // 这个可用省略返回数据类型，这里会进行类型推断，（PS 我猜这里应该是上面的重载签名有返回类型吧）
  if (typeof value === 'number') {
		// find 查找数据对应得某一条 返回翻个
		return messageList.find((tyep) => value === tyep.id);
	} else {
		// 返回的是数组
		return messageList.filter((tyep) => tyep.type === value).splice(0,pageCont)
	}
}
// 按住ctrl + 鼠标左键会定位到 直接对应类型的函数签名

//此函数返回的 Message 数据类型 所有可通过点来获取值
loadMessage(1).sendMessage;

// 此处返回的是Message[] 数据类型 所有能调用数组的所有方法
const infoMasnew = newMessage('video',2);
infoMas.forEach(i=>{console.log(i)})

构造器重载

构造器重载和函数重载使用基本相同，主要区别是：TS类构造器重载签名和实现签名都不要管理返回值(也没有返回值)，TS构造器是在对象创建出来之后还没有赋值给对象变量之前执行，一般采用给对象属性赋值

构造器是在对象创建的整个过程中被使用到的，当对象创建完成后就不会使用到，构造器可以说成是构造函数，但是不能看做是方法

ts 和es6 的class 中的this 当new 一个对象时，构造器会隐式返回this 给对象等号左边的对象变量，this
和等号左边的对象都指向当前创建正在创建的对象 类会隐式返回this,如果要说 类有返回值那也只能是this

---

需求：根据传入的宽高计算面积 参数可为二个实参 可以为一个对象实参

type TypeSummation= {
  width?:number;
  height?:number;
}

class summation {

  public width;
  public height;
  constructor(width: number, height: number)
  constructor(ParamObje_:TypeSummation)
  // constructor(summationObj:any,height_?:number){ // 因为这个height_ 上面是构造器重载是必填参数 所以这里不建议使用可选参数
  constructor(ParamObje_Obj_:any,height_=0){
    if(typeof ParamObje_Obj_ === "object"){
      const {width,height} = ParamObje_Obj_;

      this.width = width;
      this.height = height;
    }else{
      this.width=ParamObje_Obj_;
      this.height = height_;
    }
  }

  sunArea():number{
    return this.width*this.height
  }

}

const sun = new summation(40,50);

console.log(sun.sunArea());

const obj:TypeSummation={width:10,height:20}

console.log(new summation(obj).sunArea());