TypeScript入门三：TypeScript函数类型

• TypeScript函数类型
• TypeScript函数的参数
• TypeScript函数的this与箭头函数
• TypeScript函数重载

一、TypeScript函数类型

在上一篇博客中已经对声明TypeScript类型变量已经做了初步的解析，这里先回顾以下：

 //声明函数
 function add1(x:number,y:number):number{
   return x+y;
 }

 let add2 = function(x:number,y:number):number{
   return x + y;
 }

 //定义函数类型
 type myAdd = (baseValue: number, increment: number) => number;
 //根据函数类型声明函数变量
 let myAdd1:myAdd = function(x:number,y:number) : number{
   return x + y;
 }
 let myAdd2:myAdd = function(x:number,y:number) : number{
   return x - y;
 }

 let hintStamp(str:string):void{
   console.log(str);
 }

关于函数类型有一点需要注意，需要使用type关键字并使用等号"="赋值类型；如果使用let声明并使用冒号冒“：”表示的是声明一个函数变量，并且这个函数变量有指定的类型，这个变量不能作为函数类型，只能给它自己赋值指定类型的函数。

二、TypeScript函数的参数

2.1 根据函数类型声明的函数变量，函数的实际参数名称可以不与函数类型的参数名称一致，这一点与对象类型Object的字段有点区别；

 type myAdd = (baseValue: number, increment: number) => number;
 let myAdd1:myAdd = function(a:number,b:number) : number{
   return a + b;
 }
 let myAdd2:myAdd = function(x:number,y:number) : number{
   return x - y;
 }

2.2 可选参数与默认参数：

这部非内容在官方文档中有详细的说明，这里简要的解析以下，如果有不明白的建议查看官方文档。

可选参数意思就是函数的参数在实际调用函数时，可以不需要全部对应传入，但是在定义函数类型时，必须设定默认参数。

 //示例：在定义函数类型时，给参数b设定了默认参数：'TypeScript'
 function foo (a: string,b = 'TypeScript'): void{
   console.log(a + ':' + b);
 }
 foo('hello');//hello:TypeScript

设置了默认参数，就不需要设置参数的类型了，TypeScript的IDE会主动为我们推断出参数的类型，也就是默认值的类型，如果给可选参数传值就必须对应默认参数的类型。

除了设置既定的默认参数以外，还可以使用（参数名+？）的方式设置非特定参数，但是设置默认非特定参数需要设置默认参数的类型（参数名？：类型）。这种不设定特定值的可选参数，调用函数时不给这个可选参数传值的话就会默认为undefined。

 //这是官方文档中的一个示例：
 function buildName(firstName: string, lastName?: string) {
   if (lastName){

     return firstName + " " + lastName;
   }else{
     return firstName;
   }
 }

 let result1 = buildName("Bob");  // works correctly now
 console.log(result1);
 let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
 let result3 = buildName("Bob", "Adams");  // ah, just right

2.3 剩余参数

关于剩余参数其本质就是ES6的收集（res）语法，使用"..."将多余的参数收集，但是TypeScript转换到ES5的js代码时还是需要使用arguments来实现，毕竟ES5版本中还没有收集（res）语法。详细可以了解ES6入门一：块级作用域(let&const)、spread展开、rest收集

 function buildName(firstName: string, ...restOfName: string[]) {
   return firstName + " " + restOfName.join(" ");
 }

 let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

但是需要注意，收集语法产生的数据必然是数组，所以必须使用数组类型。

三、TypeScript函数的this与箭头函数

关于this指向在JavaScript中一直是比较容易被它击晕的一个知识点，不要担心，我这里有一篇博客包治百病：JavaScript中的this指向规则

当然ES6的相关语法产生的this指向规则变化这里也有：ES6入门五：箭头函数、函数与ES6新语法

当然好不了严格模式的this指向问题：JavaScript严格模式

TypeScript并不改变JavaScript的this指向规则，而是在IDE中提供了更友好的警告提示，这个功能需要在tsconfig.json中通过"noImplicitThis": true开启。我们知道在JavaScript中this指向规则是比较复杂的，而TypeScript也根据这些规则做出了相应的调整，这里关于TypeScript函数的this指向其实就是了解"noImplicitThis"给我们的提示规则是什么？

3.1 TypeScript对象返回函数中的this会警告提示：

 let obj = {
   strs : ["aaa","bbb","ccc","ddd"],
   fun:function(){
     return function() { //这里会提示this出错，因为在严格模式下this可能为undefined，在TypeScript中IDE识别this类型为any，所以被认为可能出现undefined情况
       let index = Math.floor(Math.random() * this.strs.length);
       return this.strs[index];
     }
   }
 }
 var fun = obj.fun();
 console.log(fun());

这个问题可以使用箭头函数来解决：

 let obj = {
   strs : ["aaa","bbb","ccc","ddd"],
   fun:function(){
     return () => { //通过箭头函数解决
       let index = Math.floor(Math.random() * this.strs.length);
       return this.strs[index];
     }
   }
 }
 var fun = obj.fun();
 console.log(fun());

3.2 this作为函数参数，不会出现错误提示，这一点需要注意，因为在原生JavaScritp种这种写法会直接出现语法错误。例如示例中这样写：

 function f(this:void){//这里你可以给形参任意TypeScript类型都不会报错
     //很遗憾这里并不会报错
 }

这里有几方面的原因，严格模式下函数只执行内部this都是指向undefined，如果函数被对象调用this必然也就指向调用函数的对象。更关键的是被写在形参内的this根本就不会被TypeScript编译到原生js代码中，这里不报错其实是TypeScript将这个低级的错误帮你自动处理了，所以就静默了这个错误提示。

关于this作为参数在TypeScript中还有另一个功能，就是帮助函数维持this指向，例如官方这个示例：

 interface Card {
     suit: string;
     card: number;
 }
 interface Deck {
     suits: string[];
     cards: number[];
     createCardPicker(this: Deck): () => Card;
 }
 let deck: Deck = {
     suits: ["hearts", "spades", "clubs", "diamonds"],
     cards: Array(52),
     // NOTE: The function now explicitly specifies that its callee must be of type Deck
     createCardPicker: function(this: Deck) {
         return () => {
             let pickedCard = Math.floor(Math.random() * 52);
             let pickedSuit = Math.floor(pickedCard / 13);

             return {suit: this.suits[pickedSuit], card: pickedCard % 13};
         }
     }
 }

 let cardPicker = deck.createCardPicker();
 let pickedCard = cardPicker();

 alert("card: " + pickedCard.card + " of " + pickedCard.suit);

上面这段代码中14行的createCardPicker: function(this: Deck){}被编译成了这样：

 createCardPicker: function () {
         var _this = this;
 }

上面这种代码是我们常用维持this指向的手段，在定义接口时常见的代码，在TypeScript中它使用this作为参数的方式来实现，这样的处理方式可以非常明显的看到this指向了对象自身，并且如果这个方法被赋值给其他对象变量时同样会静默这个this参数的错误，而其他对象在TypeScript严格的变量类型语法中也可能获取这个方法作为自身参数。

3.3 this在回调函数中如何维持this指向？下面是将官方文档代码补全的示例：

 interface UIElement {
   addClickListener(onclick: (this: void, e: Event) => void): void;
 }

 class Handler {
   info: string;
   constructor(infoStr:string){
     this.info = infoStr;
   }
   onClickGood = (e: Event) => {//通过箭头函数来保持函数内部this不变
       // can't use this here because it's of type void!
       console.log(this);//指向Handler的实例对象
       console.log(this.info);//info
       console.log('clicked!');
   }
 }
 let h = new Handler('info');
 class uiElementClass implements UIElement{
   addClickListener(onclick: (this: void, e: Event) => void): void{
     onclick(new Event('event'));
   }
 }
 let uiElement:uiElementClass = new uiElementClass();
 uiElement.addClickListener(h.onClickGood);

四、TypeScript函数重载

关于TypeScript函数我想了好久就是不知道怎么解析这个东西，照着示例套吧，我也只能复制官方代码放这里了。

 let suits = ["hearts", "spades", "clubs", "diamonds"];

 function pickCard(x: {suit: string; card: number; }[]): number;
 function pickCard(x: number): {suit: string; card: number; };
 function pickCard(x:any): any {
     // Check to see if we're working with an object/array
     // if so, they gave us the deck and we'll pick the card
     if (typeof x == "object") {
         let pickedCard = Math.floor(Math.random() * x.length);
         return pickedCard;
     }
     // Otherwise just let them pick the card
     else if (typeof x == "number") {
         let pickedSuit = Math.floor(x / 13);
         return { suit: suits[pickedSuit], card: x % 13 };
     }
 }

 let myDeck = [{ suit: "diamonds", card: 2 }, { suit: "spades", card: 10 }, { suit: "hearts", card: 4 }];
 let pickedCard1 = myDeck[pickCard(myDeck)];
 alert("card: " + pickedCard1.card + " of " + pickedCard1.suit);

 let pickedCard2 = pickCard(15);
 alert("card: " + pickedCard2.card + " of " + pickedCard2.suit);