TypeScript 学习笔记 之 函数与 this

函数

TS函数特点

1. 函数的参数和返回值可以声明类型。如：

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

2. 增加了新的函数类型声明如：

let myAdd: (x:number,y:number) => number = add;

其中 (x:number,y:number) => number 即声明了一个自定义的函数类型。函数名称不是函数签名的一部分。

3. 编译器可以自动推导函数签名中的类型。示例如下;

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

4. 函数可以有可选参数。如函数声明 function buildName(firstName:string,lastName?:string){} 中 lastName 参数名称后面加了 ? 修饰表示此参数是可选的。注意：可选参数必须是在必须参数后面声明。

5. 函数参数可以有默认值。如 function makeTmpName(name:string,suffix = ".tmp"){} 中 suffix 参数就有 .tmp 的默认参数值。注意：即使给 suffix 传递了 undefined 值，suffix 变量的值依然会是默认值 .tmp。

6. 支持可变参数列表。如 function max(first:number, ...restOfNums:number[]) 中 restOfNums 就表示可变参数列表。也就是在函数参数前面添加... 即可表示为可变参数。

this

由于 TS 是 JS 的超集所以，推荐先理解 JS 中的 this
Understanding JavaScript Function Invocation and “this”

this 与箭头函数

在上面的文章中介绍说，为了将函数与指定的对象绑定在一起，JS 在 Function的原型对象中提供了 bind 函数 。通过一个闭包将需要绑定的this 捕获。这样 func 参数对应的函数在执行时，this对象就绑定为 thisValue 了。

var bind = function(func, thisValue) {
  return function() {
    return func.apply(thisValue, arguments);
  }
}

在 ES6 中，通过增加箭头函数简化了上面这一额外操作的必要性。示例如下：

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 参数

但是上面的代码还是会存在一些问题。因为即使 箭头函数里面的 this 保证等于 外面的 that。 但是，that 这个对象并无法保证就是 deck 这个对象。
因为如果使用者像下面这样调用。还是会导致 this.suits 中的 this 指向全局对象。

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

此时可以通过在 createCardPicker 这一函数上添加隐式的 this 参数类型声明。
修改后的 deck 对象声明如下：

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

此时如果再像上面那样调用的话，就会报下面的错误：

functions.ts(31,18): error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Deck'.

回调中的 this

首先看下面一个接口示例：

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

上面的接口中 this:void 表明 onclick 函数应该是一个不需要 this 对象的函数。如果 onclick 指向的是一个成员函数而且函数需要使用 this 对象，那么则 onclick 需要通过箭头函数来实现。示例如下：

class Handler{
   info:string;
   onClickGood = (e:Event) => { this.info = e.message }
}
let h = new Handler();
uiElement.addClickListener(h.onClickGood);

函数重载

由于 TS 增加为函数签名增加了类型支持。所以 TS 中的函数也就有了重载的特性。这一点跟一般的面向对象语言的重载类似。