函數(shù)
TS函數(shù)特點(diǎn)
- 函數(shù)的參數(shù)和返回值可以聲明類型。如：
function add(x:number,y:number):number{
return x + y ;
}
- 增加了新的函數(shù)類型聲明如：
let myAdd: (x:number,y:number) => number = add;
其中 (x:number,y:number) => number 即聲明了一個(gè)自定義的函數(shù)類型。函數(shù)名稱不是函數(shù)簽名的一部分。
- 編譯器可以自動(dòng)推導(dǎo)函數(shù)簽名中的類型。示例如下;
let myAdd: (x:number,y:number) => number = function(x,y){ return x + y;};
函數(shù)可以有可選參數(shù)。如函數(shù)聲明
function buildName(firstName:string,lastName?:string){}中lastName參數(shù)名稱后面加了?修飾表示此參數(shù)是可選的。注意：可選參數(shù)必須是在必須參數(shù)后面聲明。函數(shù)參數(shù)可以有默認(rèn)值。如
function makeTmpName(name:string,suffix = ".tmp"){}中suffix參數(shù)就有.tmp的默認(rèn)參數(shù)值。注意：即使給 suffix 傳遞了undefined值，suffix變量的值依然會(huì)是默認(rèn)值.tmp。支持可變參數(shù)列表。如
function max(first:number, ...restOfNums:number[])中restOfNums就表示可變參數(shù)列表。也就是在函數(shù)參數(shù)前面添加...即可表示為可變參數(shù)。
this
由于 TS 是 JS 的超集所以，推薦先理解 JS 中的 this
Understanding JavaScript Function Invocation and “this”
this 與箭頭函數(shù)
在上面的文章中介紹說(shuō)，為了將函數(shù)與指定的對(duì)象綁定在一起，JS 在 Function的原型對(duì)象中提供了 bind 函數(shù) 。通過(guò)一個(gè)閉包將需要綁定的this 捕獲。這樣 func 參數(shù)對(duì)應(yīng)的函數(shù)在執(zhí)行時(shí)，this對(duì)象就綁定為 thisValue 了。
var bind = function(func, thisValue) {
return function() {
return func.apply(thisValue, arguments);
}
}
在 ES6 中，通過(guò)增加箭頭函數(shù)簡(jiǎn)化了上面這一額外操作的必要性。示例如下：
let deck = {
suits: ["hearts", "spades", "clubs", "diamonds"],
cards: Array(52),
createCardPicker: function() {
// NOTE: the line below is now an arrow function, allowing us to capture 'this' right here
let that = this;
return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return {suit: this.suits[pickedSuit], card: pickedCard % 13};
}
}
}
this 參數(shù)
但是上面的代碼還是會(huì)存在一些問(wèn)題。因?yàn)榧词?箭頭函數(shù)里面的 this 保證等于 外面的 that。 但是，that 這個(gè)對(duì)象并無(wú)法保證就是 deck 這個(gè)對(duì)象。
因?yàn)槿绻褂谜呦裣旅孢@樣調(diào)用。還是會(huì)導(dǎo)致 this.suits 中的 this 指向全局對(duì)象。
let cardPickerFunc = deck.createCardPicker;
let cardPicker = cardPickerFunc();
let pickedCard = cardPicker();
此時(shí)可以通過(guò)在 createCardPicker 這一函數(shù)上添加隱式的 this 參數(shù)類型聲明。
修改后的 deck 對(duì)象聲明如下：
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};
}
}
}
此時(shí)如果再像上面那樣調(diào)用的話，就會(huì)報(bào)下面的錯(cuò)誤：
functions.ts(31,18): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Deck'.
回調(diào)中的 this
首先看下面一個(gè)接口示例：
interface UIElement{
addClickListener(onclick: (this:void, e:Event) => void);
}
上面的接口中 this:void 表明 onclick 函數(shù)應(yīng)該是一個(gè)不需要 this 對(duì)象的函數(shù)。如果 onclick 指向的是一個(gè)成員函數(shù)而且函數(shù)需要使用 this 對(duì)象，那么則 onclick 需要通過(guò)箭頭函數(shù)來(lái)實(shí)現(xiàn)。示例如下：
class Handler{
info:string;
onClickGood = (e:Event) => { this.info = e.message }
}
let h = new Handler();
uiElement.addClickListener(h.onClickGood);
函數(shù)重載
由于 TS 增加為函數(shù)簽名增加了類型支持。所以 TS 中的函數(shù)也就有了重載的特性。這一點(diǎn)跟一般的面向?qū)ο笳Z(yǔ)言的重載類似。
