2020你应该知道的TypeScript学习路线【函数类型】

公众号：前端微服务
GitHub：https://github.com/yongbolu
作  者：子奕

一、概述

函数是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);
})

六、关注我们

点击下方关注我???