TypeScript入门之函数

背景
由于最近业务需要，小面投入了部分前端开发工作，我本身也没有前端技术栈，学习最好的方式就是总结，今年计划也给大家扩展一下技术栈，于是乎打算写一个TypeScript入门，大家一起进步加油。鉴于大家都有编程的基础，我们从任何一门语言都会频繁使用的函数来入门TS，如果说的不对欢迎评论交流。

一、函数
众所周知，函数是用来定义行为的地方，这一点TS也不例外，此外它还包括了一些额外的功能，在使用上更为灵活。明确一点，TypeScript是JavaScript的超集。

1、函数定义
TS中包括有名函数和匿名函数，这两种方式使用上没有区别，无论你是定义API还是只使用一次的函数。

// 有名函数
function add(x: number, y: number): number {
return x + y;
}

// 匿名函数
let myAdd = function(x: number, y: number): number { return x + y; };
2、函数类型
TS的函数类型定义包含：参数类型和返回值类型，完整的函数类型由这两部分构成。

let myAdd: (x:number, y:number) => number =
function(x: number, y: number): number { return x + y; };
返回值类型是必须的就算没有也要写上void，不能留空。

3、类型推断
一般的TS开源框架实现中，大家写代码可能只有上述等式的一侧带有类型，即使这样编译器也不会报错，这是由于TS类型推断的存在。

二、this
TS的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的对象为window。这时有一个ES6提供的箭头语法可以保存函数创建时的this对象，不是调用的值。

return () => {
let pickedCard = Math.floor(Math.random() * 52);
let pickedSuit = Math.floor(pickedCard / 13);
return {suit: this.suits[pickedSuit], card: pickedCard % 13};
}
此外，还有一种方式，就是在createCardPicker方法中定义入参this，类似于Java class中的this，只不过Java是编译器做了this参数的传递，因此它不会有这个困扰。

三、重载
根据不同的入参，返回不同类型的数据，这一点和Java类似，也不难理解。

小结
TS语言的灵活性在于它是JS的超集，并在JS的基础上引入了类型系统，使得问题提前暴露在编译期，而不是等到运行时才被发现，因此现代前端开发越来越推崇使用TS。