一、概述
函数是JavaScript应用程序的基础。 它帮助你实现抽象层，模拟类，信息隐藏和模块。它在编程范式中为我们控制行为，抽象某些实现有着较大的帮助，因此 TypeScript 在 JavaScript 的基础之上添加了一些额外的功能，辅助我们更好的使用函数。 在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。今天小编就带大家一起来学习下TypeScript的函数。如果大家觉得有帮助，记得给小编点个赞，如果想获取更多干货请关注前端微服务公众号，不定期为大家带来干货。
二、与JavaScript区别
和JavaScript一样，TypeScript函数可以创建有名字的函数和匿名函数。 你可以随意选择适合应用程序的方式，不论是定义一系列API函数还是只使用一次的函数。
三、函数定义
函数就是包裹在花括号中的代码块，前面使用了关键词 function,语法格式如下所示：
function function_name() { // 执行代码 }
四、调用函数
函数只有通过调用才可以执行函数内的代码。语法格式如下所示：
function_name()
五、使用案例
5.1 基础声明
// javascript function sum(x,y) { return x + y; }
// typescript function sum(x: number, y: number): number { return x + y; }
// 表达式 const sum = function (x: number, y: number): number { return x + y; }
不过由于 TypeScript 可以根据 return 来推断返回的类型，因此有时候返回类型 number 并不是一定要书写的，不过为了给人阅读时不增加不必要的开支，写上明确的返回类型，是一种非常好的习惯。还有一点的是，虽然上述的代码我们已经为其添加了类型，不过这还不是一个很完整的类型书写，但往往我们可以忽略它，如：
type Sum = (x: number, y: number) => number; const sum: Sum = function(x: number, y: number): number { return x + y; } 复制代码
以往我们写 JavaScript 时调用 sum 函数，也许我们什么都不传，或者只传一个，但在 TypeScript 的世界中参数是必须真实存在的，我们调用时必须传递两个参数，因此我们可以使用 可选参数 和 默认参数 的方式来处理这个问题，如：
function sum(x: number, y?: number): number { } function sum(x: number, y = 0): number { }
5.2 TypeScript中arguments 处理
function sum(...num: number[]): number { return num[0] + num[1]; }
5.3 TypeScript中this的使用
let obj = { a: 1, b: function (){ return () => { return this.a; } } }
如果你没有使用箭头函数，那么这里的 this.a 会得到一个错误，因为此时的 this 会被设置为一个全局的对象，浏览器中是 window ，Node.js里是 global。
5.4 TypeScript重载功能
function sync(x: number): number; function sync(x: { code: number, sig: string}): string; function sync(x: any): any { if (typeof x === "number") { return 0; } if (typeof x === "string") { return "0"; } } sync(0);
5.5 TypeScript中的e
const divDom = document.getElementById("div"); if (divDom) { const pay = function(current: number, discount: number): number{ return current * (discount/100); } divDom.addEventListener("click", function(this: HTMLElement ,e: MouseEvent){ pay(1000, 20); }); }
在这个例子中不仅用到了函数的类型，还有一个特别有意思的 this 的问题，请看下面代码：
divDom.addEventListener("click", function(this: HTMLElement ,e: MouseEvent){ pay(1000, 20); }); this: HTMLElement
其实是非常明确的指明 addEventListener 的 handler 函数的 this 的问题，这个 this 是指向了一个 HTML 元素对象，举个具体的例子，假设我们自己写了一个UI组件，提供了一个 addEventListener ，在处理 handler 函数时，应该将 this 指向这个这个UI组件实例，在 TypeScript 中写法如下:
class UI { public name: string; constructor(){ this.name = "id"; } public addEventListener(type: string, handler: (this: UI, e: string) => void) { /// handler.call(this, this.name); } } const ui = new UI(); const onClick = ui.addEventListener("click", function(e: string){ console.log(this.name); })
