TypeScript4-函数

7.1 TypeScript 函数与 JavaScript 函数的区别

函数定义

function fn() {}
const fn = function() {}
const fn = () => {}

类型注解（两种）

// 带参函数
function square = (x: number ) : number => {
  return x ** 2
}
const total = square(3)
// 另一种写法：函数参数接受解构类型。 即便只有一个解构时， 也需要遵循
function square: (x: number ) => number = (x) => {
  return x ** 2
}
const total = square(3)

7.2 箭头函数

1.常见语法

myBooks.forEach(() => console.log('reading'));
myBooks.forEach(title => console.log(title));
myBooks.forEach((title, idx, arr) =>
  console.log(idx + '-' + title);
);
myBooks.forEach((title, idx, arr) => {
  console.log(idx + '-' + title);
});

2.使用示例

// 未使用箭头函数
function Book() {
  let self = this;
  self.publishDate = 2016;
  setInterval(function () {
    console.log(self.publishDate);
  }, 1000);
}
// 使用箭头函数
function Book() {
  this.publishDate = 2016;
  setInterval(() => {
    console.log(this.publishDate);
  }, 1000);
}

返回类型

返回：

• 有返回
• 无返回 void
• never ```typescript // 注解形参和返回的类型 function add(a: number, b: number): number { return a + b; } const total = add(x, y) // total能够自动推断

// 函数没有返回值 function hello(): void { console.log(‘hello’); }

// never 函数永远不会执行到最后 function event(): never { while(true) {}; }

<a name="gKfEq"></a>
#### 参数类型
```typescript
function createUserId(name: string, id: number): string {
  return name + id;
}

解构参数：

function add({a, b}: {a: number, b: number}): number {
    return a + b;
}

7.4 函数类型

let IdGenerator: (chars: string, nums: number) => string;
function createUserId(name: string, id: number): string {
  return name + id;
}
IdGenerator = createUserId;

7.5 可选参数及默认参数

// 可选参数
function createUserId(name: string, age?: number, id: number): string {
  return name + id;
}
// 默认参数
function createUserId(  name: string = "Semlinker",
  age?: number,
  id: number): string {
  return name + id;
}

7.6 剩余参数

function push(array, ...items) {
  items.forEach(function (item) {
    array.push(item);
  });
}
let a = [];
push(a, 1, 2, 3);

7.7 函数重载

函数重载或方法重载是使用相同名称和不同参数数量或类型创建多个方法的一种能力。要解决前面遇到的问题，方法就是为同一个函数提供多个函数类型定义来进行函数重载，编译器会根据这个列表去处理函数的调用。

function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: string, b: number): string;
function add(a: number, b: string): string;
function add(a: Combinable, b: Combinable) {
  if (typeof a === "string" || typeof b === "string") {
    return a.toString() + b.toString();
  }
  return a + b;
}

在以上代码中，我们为 add 函数提供了多个函数类型定义，从而实现函数的重载。之后，可恶的错误消息又消失了，因为这时 result 变量的类型是 string 类型。在 TypeScript 中除了可以重载普通函数之外，我们还可以重载类中的成员方法。
方法重载是指在同一个类中方法同名，参数不同（参数类型不同、参数个数不同或参数个数相同时参数的先后顺序不同），调用时根据实参的形式，选择与它匹配的方法执行操作的一种技术。所以类中成员方法满足重载的条件是：在同一个类中，方法名相同且参数列表不同。下面我们来举一个成员方法重载的例子：

class Calculator {
  add(a: number, b: number): number;
  add(a: string, b: string): string;
  add(a: string, b: number): string;
  add(a: number, b: string): string;
  add(a: Combinable, b: Combinable) {
    if (typeof a === "string" || typeof b === "string") {
      return a.toString() + b.toString();
    }
    return a + b;
  }
}
const calculator = new Calculator();
const result = calculator.add("Semlinker", " Kakuqo");

这里需要注意的是，当 TypeScript 编译器处理函数重载时，它会查找重载列表，尝试使用第一个重载定义。 如果匹配的话就使用这个。 因此，在定义重载的时候，一定要把最精确的定义放在最前面。另外在 Calculator 类中，add(a: Combinable, b: Combinable){ } 并不是重载列表的一部分，因此对于 add 成员方法来说，我们只定义了四个重载方法。

interface JqueryInstance {
    html: (html: string) => JqueryInstance
}
// 函数重载
// declare function $(readyFunc: () => void): void
// declare function $(param: string): JqueryInstance
// interface语法实现函数重载
 interface JQuery {
   (readyFunc: () => void): void;
     (param: string): JqueryInstance;
}
declare var $: JQuery;

如何对对象进行类型定义， 以及对类进行类型定义， 以及命名空间的嵌套

// new $.fn.init()
declare namespace $ {
    namespace fn {
        class init {}
    }
}