一、JS中的函数
通过下面的例子可以迅速回想起这两种JavaScript中的函数：
// Named functionfunctionadd(x,y){returnx+y;}// Anonymous functionletmyAdd=function(x,y){returnx+y;};
在JavaScript里，函数可以使用函数体外部的变量。 当函数这么做时，我们说它‘捕获’了这些变量。 至于为什么可以这样做以及其中的利弊超出了本文的范围，但是深刻理解这个机制对学习JavaScript和TypeScript会很有帮助。
letz=100;functionaddToZ(x,y){returnx+y+z;}
二、为函数定义类型
functionadd(x:number,y:number):number{returnx+y;}letmyAdd=function(x:number,y:number):number{returnx+y;};
我们可以给每个参数添加类型之后再为函数本身添加返回值类型。 TypeScript能够根据返回语句自动推断出返回值类型，因此我们通常省略它。
三、参数
1.可选参数
JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。
TypeScript里的每个函数参数都是必须的。 这不是指不能传递null或undefined作为参数，而是说编译器检查用户是否为每个参数都传入了值。 编译器还会假设只有这些参数会被传递进函数。 简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。
functionbuildName(firstName:string,lastName:string){returnfirstName+" "+lastName;}// error, too few parametersletresult1=buildName("Bob");// error, too many parametersletresult2=buildName("Bob","Adams","Sr.");// ah, just rightletresult3=buildName("Bob","Adams");
在TypeScript里我们可以在参数名旁使用?实现可选参数的功能。 可选参数必须跟在必须参数后面。
functionbuildName(firstName:string,lastName?:string){if(lastName)returnfirstName+" "+lastName;elsereturnfirstName;}
2.参数默认值
在TypeScript里，我们也可以为参数提供一个默认值当用户没有传递这个参数或传递的值是undefined时。 它们叫做有默认初始化值的参数。
functionbuildName(firstName:string,lastName="Smith"){returnfirstName+" "+lastName;}
3.剩余参数
必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用arguments来访问所有传入的参数。
在TypeScript里，你可以把所有参数收集到一个变量里：
functionbuildName(firstName:string,...restOfName:string[]){returnfirstName+" "+restOfName.join(" ");}letemployeeName=buildName("Joseph","Samuel","Lucas","MacKinzie");
剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。 编译器创建参数数组，名字是你在省略号（...）后面给定的名字，你可以在函数体内使用这个数组。
四、this
1.JS中的this
如果你以前没用过JS，有一件事可能会令你惊讶：JS中的每个函数都有this变量，而不局限于类中的方法。以不同的方式调用函数，this的值也不同，这极易导致代码脆弱、难以理解。鉴于此，很多团队禁止在类方法以外使用this。如果你也想这么做，开启eslint的no-invalid-this规则。
以下参考
window.color='red';leto={color:'blue'};functionsayColor(){console.log(this.color);}sayColor();// 'red' o.sayColor=sayColor;o.sayColor();// 'blue'
定义在全局上下文中的函数 sayColor()引用了 this 对象。这个 this 到底引用哪个对象必须到函数被调用时才能确定。因此这个值在代码执行的过程中可能会变。如果在全局上下文中调用sayColor()，这结果会输出"red"，因为 this 指向 window，而 this.color 相当于 window.color。而在把 sayColor()赋值给 o 之后再调用 o.sayColor()，this 会指向 o，即 this.color 相当于o.color，所以会显示"blue"。
此时将回调函数写成箭头函数就可以解决问题。这是因为箭头函数中的 this 会保留定义该函数时的上下文。
window.color='red';leto={color:'blue'};letsayColor=()=>console.log(this.color);sayColor();// 'red' o.sayColor=sayColor;o.sayColor();// 'red'
在es5中有很多方法解决这个问题，但是一般比较常用的方法就是，在调用上面声明个变量，一般叫做self或者vm，然后把这个用在函数中
letobj={name:"asim",sayLater:function(){letself=this;// Assign to selfconsole.log(self);setTimeout(function(){console.log(`${self.name}`);// Use self not this},1000);}};
但是在es6中，我们有更好的方式解决这个问题，如果我们使用箭头函数，那箭头函数里面的this的值和外面的值是一样的
letobj={name:"asim",sayLater:function(){console.log(this);// `this` points to objsetTimeout(()=>{console.log(this);// `this` points to objconsole.log(`${this.name}`);// `this` points to obj},1000);}};obj.sayLater();
2.Typescript的This
参考
this可以说是Javascript里最难理解的特性之一了，Typescript里的 this 似乎更加复杂了，Typescript里的 this 有三中场景，不同的场景都有不同意思。
this 参数: 限制调用函数时的 this 类型
this 类型: 用于支持链式调用，尤其支持 class 继承的链式调用
ThisType:用于构造复杂的 factory 函数
3.TS this 类型: 用于支持链式调用
参考《TypeScript编程》第5.3节
实现ES6中 Set数据结构的简化版，有以下两个操作：
letset=newSet;set.add(1).add(2).add(3);set.has(2);//trueset.has(4);//false
这里要支持链式调用，大概这样的：
classSet{has(value:number):boolean{}add(value:number):Set{}}
这样做是可以的，但是如果想定义Set的子类呢？
classMutableSetextendsSet{delete(value:number):boolean{}add(value:number):MutableSet{}}
这就需要又写一遍add去覆盖，其实可以在父类Set中返回this就不用这么麻烦了：
classSet{has(value:number):boolean{}add(value:number):this{}}
4.TS中this做为对象方法调用，这一点和JS中的this表现一致
这也是绝大部分 this 的使用场景，当函数作为对象的 方法调用时，this 指向该对象
constobj={name:"yj",getName(){returnthis.name// 可以自动推导为{ name:string, getName():string}类型},}obj.getName()// string类型
这里有个坑就是如果对象定义时对象方法是使用箭头函数进行定义，则 this 指向的并不是对象而是全局的 window，Typescript 也自动的帮我推导为 window
constobj2={name:"yj",getName:()=>{returnthis.name// check 报错，这里的this指向的是window},}obj2.getName()// 运行时报错
5.TS中this在普通函数中使用
即使是通过非箭头函数定义的函数，当将其赋值给变量，并直接通过变量调用时，其运行时 this 执行的并非对象本身
constobj={name:"yj",getName(){returnthis.name},}constfn1=obj.getNamefn1()// this指向的是window，运行时报错
很不幸，上述代码在编译期间并未检查出来，我们可以通过为getName添加this的类型标注解决该问题
interfaceObj{name:string// 限定getName调用时的this类型getName(this:Obj):string}constobj:Obj={name:"yj",getName(){returnthis.name},}obj.getName()// check okconstfn1=obj.getNamefn1()// check error
这样我们就能报保证调用时的 this 的类型安全.
关于这个作用，《TypeScript编程》第4.1.4节这样描述，此时this不是常规的参数，而是保留字，是函数签名的一部分。
6.TS中this在构造函数中使用
classPeople{name:stringconstructor(name:string){this.name=name// check ok}getName(){returnthis.name}}constpeople=newPeople("yj")// check ok
这里面还是有坑的，具体可以参考原文：详解Typescript里的This
7.call 和 apply 调用
call 和 apply 调用没有什么本质区别，主要区别就是 arguments 的传递方式，不分别讨论。和普通的函数调用相比，call 调用可以动态的改变传入的 this， 幸运的是 Typescript 借助 this 参数也支持对 call 调用的类型检查
interfacePeople{name:string}constobj1={name:"yj",getName(this:People){returnthis.name},}constobj2={name:"zrj",}constobj3={name2:"zrj",}obj1.getName.call(obj2)obj1.getName.call(obj3)// check error
五、函数重载
JavaScript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据是很常见的。
letsuits=["hearts","spades","clubs","diamonds"];functionpickCard(x):any{// Check to see if we're working with an object/array// if so, they gave us the deck and we'll pick the cardif(typeofx=="object"){letpickedCard=Math.floor(Math.random()*x.length);returnpickedCard;}// Otherwise just let them pick the cardelseif(typeofx=="number"){letpickedSuit=Math.floor(x/13);return{suit:suits[pickedSuit],card:x%13};}}letmyDeck=[{suit:"diamonds",card:2},{suit:"spades",card:10},{suit:"hearts",card:4}];letpickedCard1=myDeck[pickCard(myDeck)];alert("card: "+pickedCard1.card+" of "+pickedCard1.suit);letpickedCard2=pickCard(15);alert("card: "+pickedCard2.card+" of "+pickedCard2.suit);
pickCard方法根据传入参数的不同会返回两种不同的类型。 如果传入的是代表纸牌的对象，函数作用是从中抓一张牌。 如果用户想抓牌，我们告诉他抓到了什么牌。 但是这怎么在类型系统里表示呢。
方法是为同一个函数提供多个函数类型定义来进行函数重载。 编译器会根据这个列表去处理函数的调用。 下面我们来重载pickCard函数。
letsuits=["hearts","spades","clubs","diamonds"];functionpickCard(x:{suit:string;card:number;}[]):number;functionpickCard(x:number):{suit:string;card:number;};functionpickCard(x):any{// Check to see if we're working with an object/array// if so, they gave us the deck and we'll pick the cardif(typeofx=="object"){letpickedCard=Math.floor(Math.random()*x.length);returnpickedCard;}// Otherwise just let them pick the cardelseif(typeofx=="number"){letpickedSuit=Math.floor(x/13);return{suit:suits[pickedSuit],card:x%13};}}letmyDeck=[{suit:"diamonds",card:2},{suit:"spades",card:10},{suit:"hearts",card:4}];letpickedCard1=myDeck[pickCard(myDeck)];alert("card: "+pickedCard1.card+" of "+pickedCard1.suit);letpickedCard2=pickCard(15);alert("card: "+pickedCard2.card+" of "+pickedCard2.suit);
这样改变后，重载的pickCard函数在调用的时候会进行正确的类型检查。
为了让编译器能够选择正确的检查类型，它与JavaScript里的处理流程相似。 它查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。
注意，function pickCard(x): any并不是重载列表的一部分，因此这里只有两个重载：一个是接收对象另一个接收数字。 以其它参数调用pickCard会产生一个错误
