这个是我参加2022初次更文考验第4天，活动规则查询：2022初次更文考验」。
轻载的认知
用以建立不一样主要参数键入而且相匹配不一样主要参数输出函数公式，在前界定好几个轻载签字，一个完成签字，一个函数体结构，轻载签字通常是精准表明函数输出，完成签字通常是把所有的输出种类做一个全量界定，避免TS编译程序出错，函数体便是全部整个函数公式完成的所有逻辑性。
函数重载
运用事例：一个班有许多学生，老师应该查看学生们的客户信息，假如是输入数字就可以通过排行（id）去配对，键入是指字符串数组就可以通过成绩(grades)去配对，用TS仿真模拟这样的事情。 最先界定用户类型
type User={
id:number,
name:string,
age:number,
grades:number
}
班集体客户信息和数据
const userList:User[]=[
{id:1,name:"小亮",age:20,grades:'98'},
{id:2,name:"小亮",age:20,grades:'98'},
{id:3,name:"小亮",age:20,grades:'98'},
{id:4,name:"小亮",age:20,grades:'98'}
]
1.一般完成构思
根据协同种类做键入界定，导出界定。键入number是(id)是唯一的成绩，应用find；键入string是（grades）可能会有重复，应用filter。
function getUserInfo(value:number|string):User|User[]{
if(typeof value==='number'){
return userList.find(item=>item.id===value)
}else{
return userList.filter(item=>item.grades===value)
}
}
那样界定TS会报一个出现异常
缘故切出最底层find方式源代码，才发现是find很有可能返回undefined种类
解决方法非常简单，返回类型再协同一个undefined就可以处理。
缺陷：缺陷非常明确，也是通过协同种类输出，明知道number键入一定回到User，string键入一定回到User[],那样回到不具体输入什么回到哪些，有时候我们看方式的概念时就爱看键入啥回到啥，更加好的判断种类，为解决这一函数重载出现
2.函数重载完成构思
TS的函数重载主要分好几个轻载签字 完成签字 函数体
简易了解来说完成签字通常是以前一般完成思维的状况，TS编译程序时查验全部种类和函数体里的比照确认是否存有。完成签字和函数体查验成功后，执行函数时实际是某一轻载签字 函数体，跳过了完成签字。
function getUserInfo(value:number):User|undefined
function getUserInfo(value:string):User[]
function getUserInfo(value:number|string):User|User[]|undefined{
if(typeof value==='number'){
return userList.find(item=>item.id===value)
}else{
return userList.filter(item=>item.grades===value)
}
}
根据鼠标单击具体调用方法getUserInfo(2),command 鼠标点击，它会全自动分析跳转number这一轻载签字上边去，很直观地懂得如何调用的。
需求变更： 如今查看同样成绩过多，教师键入string想添加一个自变量count用以操纵查看总数。
改动流程，第二个轻载签字以实现签字加上count界定，函数体撰写count逻辑性，可是TS给出一下错，指的是完成签字传了2个值，第一个轻载签字也仅有一个值，那样仅有在推进签字增加一个count初始值就可以。
实际完成源代码如下所示
function getUserInfo(value:number):User|undefined
function getUserInfo(value:string,count:number):User[]
function getUserInfo(value:number|string,count:number=1):User|User[]|undefined{
if(typeof value==='number'){
return userList.find(item=>item.id===value)
}else{
return userList.filter(item=>item.grades===value).slice(0,count)
}
}
getUserInfo('98',3)
方法重载
方法重载和函数重载实际上类似，或是方法重载就放在类里边的 运用事例：简易封装形式一个二维数组，使二维数组更为实用,根据index删掉回到index,根据object删掉回到object
class ArrayEN {
constructor(public arr: object[]) {}
get(Index: number) {
return this.arr[Index];
}
delete(value: number): number;
delete(value: object): object;
delete(value: number | object): number | object {
this.arr = this.arr.filter((item, index) => {
if (typeof value === "number") {
return value !== index;
} else {
return value !== item;
}
});
return value;
}
}
构造器轻载
首先来了解构造器constructor的基本原理，构造器都是没有传参的，它会隐式回到一个this，这一this会分给new对象左边的自变量，到此每一个this全是偏向的现阶段在使用的对象。
构造器轻载和函数重载使基本一致，关键区别在于：TS 类构造器轻载签字以实现签字都不用管理方法传参，TS 构造器要在目标建立出来以后，但还没有取值给目标自变量曾经被实行，一般用于给对象属性取值。 运用事例：如今规定算一个图形的总面积，这一图型有可能是传参能是目标也有可能是宽度
interface OJType{
width?:number,
height?:number
}
class Graph{
public width:number;
public height:number;
constructor(width?:number,height?:number)
constructor(side?:OJType)
constructor(v1:any,v2?:any){
if(typeof v1==='object'){
this.width=v1.width;
this.height=v1.height
}else{
this.width=v1;
this.height=v2;
}
}
getArea(){
const {width,height}=this;
return width*height
}
}
const g=new Graph(10,10);
console.log(g.getArea())
关键完成构思就是利用构造器将定义方法出去，关键在于含有宽度对象种类，这儿用了接口方式界定，接着就是width,heihgt的number种类，最终简单根据typeod判断对象种类然后再进行取值，综上所述发觉不论是函数重载，方法重载，构造器轻载全是异曲同工之处，只是要留意适用场景就可以了，在vue3的源代码好多地方都采用到，所以许多情景全是能用到的，后边还会继续深入分析TS的一些内容.
