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; };