typescript 学习系列-函数

介绍：函数是JavaScript应用程序的基础。 它帮助你实现抽象层，模拟类，信息隐藏和模块。 在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义行为的地方。 TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用

js中的函数

// 命名函数
function add(x, y) {
	return x + y;
}
// 在js中函数是一等公民，既可以把它赋值给一个变量，也可以把它当做参数传递给另一个函数
// 匿名函数（或者也叫函数表达式）
let addNum = function(x, y) {
	return x + y;
}

为函数定义返回值类型

function add(x: number, y: number): number {
	return x + y;
}
let addNum = function(x: number, y: number): number {
	return x + y;
}
// 完整的函数类型写法：
let addNum: (x: number, y: number) => number = function(x: number, y: number): number {
	return x + y;
}
// 第二部分是返回值类型。 对于返回值，我们在函数和返回值类型之前使用(=>)符号，使之清晰明了。

函数的可选参数和默认参数

可选参数：如果不传则不会报错
默认参数：如果不传则使用默认值，传了则使用传递的值

function infos(firstName: string, lastName?: string): string {
	return `${firstName} ${lastName}`;
}
// 默认参数：
function add(x: number, y: number = 1): number {
	return x + y;
}
add(1) // 没传则使用默认参数值1，最后得出 2
add(1, 2) // 传了参数2， 则使用传递的参数，最后得出 3

剩余参数：

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用arguments来访问所有传入的参数。

在TypeScript里，你可以把所有参数收集到一个变量里

function add(x: number, ...rest: number[]): number{
	for(let i: number = 0; i < rest.length; i++) {
		x += rest[i]
	}
	return x;
}
add(1, 2, 3, 4, 5) // 15

函数的重载

JavaScript本身是个动态语言。 JavaScript里函数根据传入不同的参数而返回不同类型的数据叫重载。

let suits = ["hearts", "spades", "clubs", "diamonds"];
function pickCard(x: {suit: string; card: number; }[]): number;
function pickCard(x: number): {suit: string; card: number; };
function pickCard(x): any {
    // 检查所传参数x类型是否是一个object/array
    // 如果是对象或者数组，便从中取出牌
    if (typeof x == "object") {
        let pickedCard = Math.floor(Math.random() * x.length);
        return pickedCard;
    }
    // 否则，随机取出
    else if (typeof x == "number") {
        let pickedSuit = Math.floor(x / 13);
        return { suit: suits[pickedSuit], card: x % 13 };
    }
}
let myDeck = [{ 
	suit: "diamonds", 
	card: 2 
}, 
{
	suit: "spades", 
	card: 10 }, 
{ 
	suit: "hearts", 
	card: 4 
}];
let pickedCard1 = myDeck[pickCard(myDeck)];
console.log(`${pickedCard1.card} ${pickedCard1.suit}`);

let pickedCard2 = pickCard(15);
console.log(`${pickedCard2.card} ${pickedCard2.suit}`);

this和箭头函数

lambda表达式 ()=>{something} 或 ()=>something 相当于js中的函数,它的好处是可以自动将函数中的this绑定到上下文中
JavaScript里，this的值在函数被调用的时候才会指定.

const obj = {
	name: 'zhangsan',
	age: 20,
	printInfo() {
		console.log(`My name is ${this.name} and my age is ${this.age}`) // 此处的this指向的是obj 对象
	}
}
// 再看一个例子
```typescript
const shape = {
    name: "rectangle",
    popup: function() {
        console.log('This inside popup(): ' + this.name);
        setTimeout(function() {
            console.log('This inside setTimeout(): ' + this.name); // 此处的this.name 打印为空
            console.log("I'm a " + this.name + "!");
        }, 3000);
    }
};
shape.popup();
// 我们，将参数中的回调函数改为箭头函数
setTimeout(() => {
	console.log('This inside setTimeout(): ' + this.name);
	console.log("I'm a " + this.name + "!");
}, 3000)
// 要注意回调函数中的函数或者返回一个函数时，此时的函数是一个普通函数，他无法绑定this的上下文环境此时this为undefined，解决方案是：改为箭头函数
// 在以上实例编译为js的文件中，我们可以看到一行 var _this = this;，_this 在 setTimeout() 的回调函数引用了 name 属性。