函数

1. 函数类型

1.1 为函数定义类型

具名函数

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

添加类型
function add(x:number, y:number): number {
    return x+y;
}

匿名函数

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

添加类型
let add = function(x:number,y:number):number {
    return x+y;
}

1.2 完整函数类型

// (x:number,y:number) => number 为函数类型
// (x:number,y:number) 为参数类型， => number 对应返回值类型。对于完整函数类型来说，这两部分都是需要的

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

// 其中，参数类型指定了名字和类型,如 x: number, x为名字，number为类型。而名字只是为了增加可读性，不存在实际的限制，如：  

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

此时参数类型的名字 baseValue 与 真正参数的名字 x 并不相同。我们只要参数类型匹配，就认为是有效的类型。

第二部分是返回值类型，如 number, 对于函数和返回值类型必须使用 => 符号。返回值类型是函数类型的必要部分,如果没有返回值，必须指定为 void

推断类型

// The parameters `x` and `y` have the type number
let add: (baseValue:number,increment:number)=>number = (x,y) => {
    return x+y;
}

即赋值语句一边(如左边)指定了类型，而另一边(如右边)没有指定类型，TypeScript会自动识别出类型。

1.3 函数参数

TypeScript要求函数的实参个数和形参个数相等：

function buildName(firstName: string, lastName: string) {
    return firstName + lastName;
}

buildName('bob');    // error, 参数过少
buildName('bob','adams','sr');  // error, 参数过多
buildName('bob','adams');  // 正确

可选参数

function buildName(firstName: string, lastName?: string) {
    return firstName + lastName;
}

buildName('1')  // 正确
buildName('1','2')  // 正确

可以使用 ? 表示参数可选。 可选参数必须放在函数的必须参数后面。

默认参数

function buildName(firstName: string, lastName='123') {
    return firstName + lastName;
}

buildName('1')  // 正确, 默认参数同样是可选的，此时实参不必和形参个数一样
buildName('1','2')  // 正确

可选参数函数和默认参数函数共享一个函数类型：(firstName:string, lastName: string) => string,此时默认参数的默认值消失了，只表示它是可选参数

和可选参数函数不同，默认参数函数的默认值参数不必放在必须参数后面，此时如果默认值参数出现在必须参数之前，那么必须明确传入 undefined 来获取默认值：

function buildName(firstName='123', lastName:string) {
    return firstName + lastName;
}

buildName('bob') // error 实参太少，此时 firstName 为 bob， lastName 为 undefined
buildName(undefined, 'bob')  // 正确，firstName='123', lastName='bob'

剩余参数

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

const employeeName = buildName('1','2','3','4');
// restOfName === [2,3,4]

剩余参数函数的类型:

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

const buildFun: (name:string, ...rest: string[]) => string = buildName

2. this

this和箭头函数

在js中，this的值只有在被调用的时候才会指定，而不是在定义函数的时候。

let deck = {
    suits: ["hearts", "spades", "clubs", "diamonds"],
    createCardPicker: function() {
        return function() {
            // 返回一个函数，且该函数为非方法式调用(不是object.method())
            // 那么 this 为 window，严格模式下为 undefined
            return this.suits
        }
    }
}

let cardPicker = deck.createCardPicker();
cardPicker();  // error, undefined 上没有 suits 属性

为了解决这个问题，可以在函数被返回时绑定好 this ，无论之后怎么调用，this 都是 deck 对象,而不是调用时的值：

let deck = {
    suits: '123',
    createCardPicker: function() {
        return () => {
            // 通过箭头函数， this 绑定为 deck 对象
            return this.suits
        }
    }
}

let cardPicker = deck.createCardPicker();
cardPicker();  //  输出 '123'

更为友好的是，如果使用 TypeScript,且给编译器设置了 --noImplicitThis , 那么第一种情况里的 this 会认为是 any 类型，而第二种this是deck的类型。

函数重载

当需要某个方法，根据传入参数的类型不同，而返回不同类型的值时，就需要用到重载

function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    if (typeof x == "object") {
        ...
    }
    else if (typeof x == "number") {
        ...
    }
}

注意点

• 定义重载时，一定要把最精确的定义放在最前面

• function pickCard(x): any 不是重载列表的一部分，即pickCard函数只有两个重载，只能接受对象或者数字作为参数，其它参数则会报错