Typescript-5.函数

1.函数：
//和js一样，ts函数可以创建有名字的函数和匿名函数。你可以随意选择合适应用程序的方式，不论是定义一系列API函数还是只使用一次的函数。

//js
function add(x,y){
	return x + y;
}

let myAdd = function(x,y){return x + y;};

//在js里，函数可以使用函数体外部的变量。当函数这么做时，我们说它捕获了这些变量。
//ex:

let z = 100;
function addToZ(x,y){
		return x + y + z;
}

2.函数类型
-为函数添加类型(即添加参数类型以及返回值类型)：

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

-书写完整函数类型

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

函数类型包含两部分：参数和返回值类型。
我们以参数列表的形式写出参数类型，为每个参数指定一个名字和类型。
这个名字只为了增加可读性。 

let myAdd: (baseValue:number,increment:number)=>number
 = function(x:number,y:number):number{
	 return x + y;
 };

 //只要参数类型是匹配的，那么就认为它是有效函数类型，而不在乎参数名是否正确。
 推断类型
 尝试这个例子的时候，你会发现如果你在赋值语句的一边指定了类型但是另一边没有类型的话，ts会自动识别出类型

 let myAdd = function(x:number,y:number):number{
	 return x + y;
 }
 
 let myAdd: (baseValue:number,increment:number)=>number = function(x,y){
	 return x + y;
 };

 3.可选参数和默认参数
 ts里的每个函数参数都是必须得。
 这不是指不能传递null或undefined作为参数，而是说编译器检查用户是否为每个参数都传入了值。
 传递给一个函数的参数必须与函数期望的参数个数一致
 

function add(a : number, b : number){
	return a + n;
 }
 function add(a : number, b? : number){
	 if(number){
		 //xxx
	 }
	 else{
		 //xxx
	 }
 }
 function add(a : number, b = 2){
	 //......
 }

 剩余参数

 function buildName(firstName:string,....restOfName:string[]){
	 return firstName + " " + restOfName.join(" ");
 }
 let name = buildName("cheng","tian","tang");

 this 和箭头函数
 JavaScript里，this的值在函数被调用的时候才会指定。
 

let deck = {
	suits:["hearts", "spades","clubs","diamonds"],
	cards: Array(52),
	createCardPicker: function(){
		return function() {
			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);//这里会报错，因为this会指定为函数调用时的值


 let deck = {
	suits:["hearts", "spades","clubs","diamonds"],
	cards: Array(52),
	createCardPicker: function(){
		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);//这里不会报错，因为箭头表达式会保存函数创建时的值 
let deck = {

	suits:["hearts", "spades","clubs","diamonds"],
	cards: Array(52),
	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);//这里不会报错，因为箭头表达式会保存函数创建时的值

//现在，ts知道createCardPicker期望在某个Deck对象上调用。也就是说this是Deck类型的，而非any，因此 --noImplicitThis不会报错了。
 
回调函数里的this参数
当你将一个函数传递到某个库函数里稍后被调用时，你可能也见到过毁掉函数里的this会报错、。
因为当回调函数被调用时，它会被当成一个普通函数被调用，this将为undefined。
稍作改动，你就可以通过this参数来避免错误。首先，库函数的作者要指定this的类型。

interface UIElement{
	addOnClickListener(
		onclick: (this : void,e: Event) => void;
		//this:void 意味着addClickListener期望onclick是一个函数且它不需要一个this类型
	):void;
}


this:void 意味着addClickListener期望onclick是一个函数且它不需要一个this类型。
class Handler{
	info : string;
	onClickBad(this : Handler,e : Event){
		
	}
}
let handler = new Handler();
uIElement.addOnClickListener(handler.onClickBad);//错了，因为addClickListener期望onclick是一个函数且它不需要一个this类型


class Handler{
	info : string;
	onClickBad(this : void,e : Event){
		//但是这里没办法使用Handler内的东西
	}
}
let handler = new Handler();
uIElement.addOnClickListener(handler.onClickBad);//对了，因为addClickListener期望onclick是一个函数且它不需要一个this类型




class Handler{
	info:string;
	onClickBad = (e:Event) =>{
		this.info = e.message
	}	
}

//重载
//JavaScript本身是个动态语言。JavaScript里函数根据传入不同参数而返回不同类型的数据是很常见的。
//function pickCard(x: {suit: string; card: number; }[]): number;
//function pickCard(x: number): {suit: string; card: number; };