TS学习笔记（四）：函数

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

为函数定义类型

一般使用中，我们可以不必完整写出函数类型，因为 TypeScript 会为我们自动推断出类型，需要注意的是：类型中的参数名称可以不必和值中的参数名称匹配，只要它们类型是兼容的便可。

// 书写完成函数类型
let square: (x: number, y: number) => number;
square = function (width: number, height: number): number {
  return width * height;
}
console.log(square(5, 6)); // 30

可选参数

参数名后面接一个 ?，该参数便成为了可选参数，需要注意是：可选参数必须跟在必须参数后面

let square: (x: number, y: number, s?: number) => number;
square = function (width: number, height: number, scale?: number): number {
  if(scale) {
    return width * height * scale;
  } else {
    return width * height;
  }
}
console.log(square(5, 6)); // 30
console.log(square(5, 6, 2)); // 60

默认参数

当用户没有给一个参数传递值或者传递的值是 undefined 时，这个参数叫做可以有默认值的参数，我们可以使用 = 指定这种情况下的取值，在所有的必须参数后面带默认值的参数都是可选的，与可选参数一样，在调用函数的时候是可以省略的，但是有默认值的参数不一定要放在必须参数的后面，也可以放在前面，当传入 undefined 的时候，就会取默认参数指定的默认值。

function square(width = 6, height = 6, scale: number, cut = 10): number {
  return width * height * scale - cut;
}
square(5, undefined, 2); // 5 * 6 * 2 - 10 = 50

剩余参数

与 ES6 一样，TypeScript 也支持剩余参数。

function max(a: number, b: number, ...resArr: number[]): number {
  return Math.max(a, b, ...resArr);
}
console.log(max(10, 5, 6, 100, 200)); // 200

this 问题

在 TypeScript 中，可以在第一个参数里指定 this 的类型，虽然 this 在方法第一个参数的位置，但是它的作用实际上只是限定 this 的类型，并不是让我们作为第一个参数传值

class Person {
  constructor(public name: string, public age: number) {
  }
  show(this: Person, doing: string) {
    console.log(`${this.name} is ${this.age}, now is ${doing}`);
  }
}
let me = new Person('funlee', 18);
me.show('Coding'); // funlee is 18, now is Coding

可以对回调函数里的 this 类型做限定：

interface UIElement {
  addClickListener(onclick: (this: void, e: Event) => void): void
}

其中，this: void 表示 addClickListener 期望 onclick 回调函数不需要指定 this 的类型。那么限定了 this 类型后，会有什么效果呢？看如下例子：

class Handler {
  info: string;
  onClickBad(this: Handler, e: Event) {
    this.info = e.message;
  }
}
const h = new Handler();
uiElement.addClickListener(h.onClickBad); // 报错，因为this类型不匹配

// 修复报错：变更this类型
class Handler {
  info: string;
  onClickBad(this: void, e: Event) {
    this.info = e.message;
  }
}
const h = new Handler();
uiElement.addClickListener(h.onClickBad);

重载

TypeScript 允许我们定义多个函数类型定义来进行函数重载，编译器会根据定义列表去处理函数的调用。

function foo(x: number): string
function foo(x: string): string
function foo(x): any {
  if (typeof x === 'number') {
    return `${x} is a number`;
  } else if (typeof x === 'string') {
    return `${x} is a string`;
  }
}

console.log(foo(123)); // 输出：123 is a number
console.log(foo('123')); // 输出：'123' is a string