今天我们项目老大给我们分享了这样一个问题，记录一下。 在实现某个功能的时候, 要写一个时间转换的函数， 大概就是传递一个Moment对象进去， 然后给我返回一个格式为YYYY-MM-DD HH：mm：ss的字符串， 如果参数是undefined， 就不做处理，返回undefined； 然后写了这样一个函数：
 
function handleDateFormat(date?: moment.Moment): string | undefined {
  if (!date) {
    return ;
  }
  return date.format('YYYY-MM-DD HH:mm:ss');
};
  
const str = handleDateFormat(moment());
 
但是这样有个问题，就是这个函数的返回类型无论在什么时候都是 string｜ undefined类型；
 
 
 但是实际上它在参数为Moment的时候返回值一定是string， 在参数为undefined的时候一定是undefined。 出现这个问题的原因也很简单，编辑器并不能知道入参是什么类型的，返回值也不能确定，那这个函数的签名该怎么写？
 这时可以为这个函数提供多个函数类型定义来进行函数重载， 可以完美的解决这个问题！
 
  function handleDateFormat<T extends moment.Moment | undefined>(
    date: T
  ): T extends moment.Moment ? string : undefined;
  function handleDateFormat(date?: moment.Moment): string | undefined {
    if (!date) {
      return ;
    }
    return date.format('YYYY-MM-DD HH:mm:ss');
  }
 

 
 
 TypeScript函数重载是指为同一个函数提供多个函数类型，它的意义在于让你清晰的知道 传入不同的参数得到不同的结果。如果不是这种情况， 那就不需要使用函数重载。
 因为这个函数在传入Moment类型的时候返回字符串类型， 传入undefined类型的时候返回undefined类型，所以在开头额外进行了一次函数类型定义，在函数执行时，根传入的参数类型不同，进行不同的计算。
 
注意点：
 
为了让编辑器能够选择正确的检查类型， 他会从重载列表的第一个开始匹配， 因此，在定义重载时， 一定要把最精确的定义放在最前面。
重载签名必须均导出或均不导出！
 

什么叫重载
 
名字相同 ，参数类型不同
 
方法重载
 
方法重载在类中定义多个同名的方法，但是每一个同名的方法要求不同数据类型和不同参数
 
 下面来实现一个方法重载 以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()
 
函数重载
 
函数重载或者方法重载适用于某个功能一样，但是细节有不一样
 比如说一个函数有多个参数，每一个参数代表不通意义 你个时候就可用使用函数重载
 
函数重载的定义
 
一个或多个签名组合叫做函数重载
外部调用函数重载时，稚嫩调用重载的前面 （函数体前面的叫做签名）不能够调用调用使用的函数签名（这个是TS规定的）
调用函数重载时会根据传递的参数来判定调用的那个函数
只有一个函数体吗，只有实现签名配备课函数体，所有重载签名签名只有签名，没有配置函数体
 
数据定义 以及类型定义
 

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());

一。函数的定义
 
 
二。参数（可选参数/默认参数/剩余参数）
 
//函数的参数
 
function add(x : number,y : number) : number{
 
  return x + y
 
}
 
//可选参数？
 
function show(name,age? : number) : void{
 
  console.log(name,age)
 
}
 
show('zs')
 
 
 
//默认参数
 
注意：可选参数，一般都要放在参数列表的最后面
 
function show1(name,age : number = 20) : void{
 
  console.log(name,age)
 
}
 
 
 
show('zs',10)  //传了参数，用传的参，没有传参，采用默认参数
 
 
 
//剩余参数
 
//剩余参数(不确定有多少个参数)
 
function add1(x1,x2,...x : number[]) : number{
 
  let sum = 0
 
  for(let i = 0;i<x.length;i++){
 
    sum += x[i]
 
  }
 
  return x1 + x2 + sum
 
}
 
 
 
let sum = add1(1,2,3,4,5,6,7,8)
 
console.log(sum)
 
 
 
 
 
 
 
三。方法的重载
 
 
 

// 抽象类和重写重载继承多态

export {}

// 抽象类.抽象方法不包括具体实现, 必须在子类里面实现; 抽象方法必须写在抽象类里面
abstract class Animal {  //抽象类
  name: string
  abstract speak():void  //抽象方法
}

class Cat extends Animal {
  speak(): void {             //重写父类的方法speak
    console.log('喵喵喵');
  }
}



//重写: 子类重写继承自父类的方法
//重载: 函数的重载
function double(val:string)
function double(val:number)
function double(val:any){
  if(typeof val === 'number') {
    return val*2
  } else if(typeof val === "string") {
    return val + val
  }
}
double(2)
double('1')
// double(true)  //加上上面两句之后这里如果传布尔值就会报错, 也即函数的重载



// 继承和多态
// 继承: 主要是通过extends
// 多态: 同一个方法,不同的子类有不同的实现, 如父类的speak方法,子类Cat的实现如上, 而其他子类的实现如下:

class Dog extends Animal {
  speak(): void {             //重写父类的方法speak
    console.log('汪汪汪');
  }
}