1.函数的类型

image.png

// 1.函数作为参数时, 在参数中如何编写类型
function foo() {}

type FooFnType = () => void;
function bar(fn: FooFnType) {
  fn();
}

bar(foo);

// 2.定义常量时, 编写函数的类型
type AddFnType = (num1: number, num2: number) => number;
const add: AddFnType = (a1: number, a2: number) => {
  return a1 + a2;
};

2 函数类型的案例

function calc(n1: number, n2: number, fn: (num1: number, num2: number) => number) {
  return fn(n1, n2)
}

const result1 = calc(20, 30, function(a1, a2) {
  return a1 + a2
})
console.log(result1)

const result2 = calc(20, 30, function(a1, a2) {
  return a1 * a2
})
console.log(result2)

3.函数的可选类型

image.png

// 可选类型是必须写在必选类型的后面的
// y -> undefined | number
function foo(x: number, y?: number) {

}

foo(20, 30)
foo(20)

4.默认参数

image.png

// 必传参数 - 有默认值的参数 - 可选参数
function foo(y: number, x: number = 20) {
  console.log(x, y)
}

foo(30)

function foo(x:number = 20, y:number) {
  console.log(x, y)
}

foo(undefined, 30)

5.剩余参数

从ES6开始，JavaScript也支持剩余参数，剩余参数语法允许我们将一个不定数量的参数放到一个数组中。

// function sum(num1: number, num2: number) {
//   return num1 + num2
// }

function sum(initalNum: number, ...nums: number[]) {
  let total = initalNum
  for (const num of nums) {
    total += num
  }
  return total
}

console.log(sum(20, 30))
console.log(sum(20, 30, 40))
console.log(sum(20, 30, 40, 50))

6.可推导的this类型

// this是可以被推导出来 info对象(TypeScript推导出来)
//pTypeScript认为函数 eating 有一个对应的this的外部对象 info，所以在使用时，就会把this当做该对象。
const info = {
  name: "why",
  eating() {
    console.log(this.name + " eating");
  },
};

info.eating(); //why eating

export {};

7.不确定的this类型

image.png

function eating() {
  console.log(this.name + " eating");
}

const info = {
  name: "why",
  eating: eating,
};

info.eating();
/* 
直接报错
test.ts:2:15 - error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
独立函数推导不出来this
*/

8.指定this的类型

这个时候，通常TypeScript会要求我们明确的指定this的类型：

type ThisType = { name: string };

function eating(this: ThisType) {
  console.log(this.name + " eating");
}

const info = {
  name: "why",
  eating: eating,
};

// 隐式绑定
info.eating();//why eating

export {};

type ThisType = { name: string };

function eating(this: ThisType) {
  console.log(this.name + " eating");
}

const info = {
  name: "why",
  eating: eating,
};

// 隐式绑定
info.eating(); //why eating

//eating();
/* The 'this' context of type 'void' is not assignable to method's 'this' of type 'ThisType'.

直接eating的话是会报错的，因为没有指定this的类型，this似乎一个对象类型，里面有个string类型的name */
//可以通过以下方式
eating.call({ name: "kobe" });
eating.apply({ name: "james" });
/* 
kobe eating
james eating */
export {};

9.函数的重载(联合类型)

image.png

 function sum(n1: string | number, n2: string | number): string | number {
  return n1 + n2;
}
/*
这么写n1 + n2会报错
因为n1的类型是string | number
n2的类型是string | number
他们两个类型之间是不能进行相加的
 */

如何解决

/**
 * 通过联合类型有两个缺点:
 *  1.进行很多的逻辑判断(类型缩小)
 *  2.返回值的类型依然是不能确定(any类型)
 */
function add(a1: number | string, a2: number | string) {
  if (typeof a1 === "number" && typeof a2 === "number") {
    return a1 + a2
  } else if (typeof a1 === "string" && typeof a2 === "string") {
    return a1 + a2
  }

  // return a1 + a2;
}

add(10, 20)

10. 函数的重载（函数重载）

比如我们对sum函数进行重构：
在我们调用sum的时候，它会根据我们传入的参数类型来决定执行函数体时，到底执行哪一个函数的重载签名；

// 函数的重载: 函数的名称相同, 但是参数不同的几个函数, 就是函数的重载
function add(num1: number, num2: number): number; // 没函数体
function add(num1: string, num2: string): string;

function add(num1: any, num2: any): any {
  if (typeof num1 === "string" && typeof num2 === "string") {
    return num1.length + num2.length;
  }
  return num1 + num2;
}

const result = add(20, 30); //从上往下一次匹配，于是就匹配到第一个add，但是第一个add没有函数体，于是就执行第三个add的函数体，，也就是实现函数
const result2 = add("abc", "cba");
console.log(result);
console.log(result2);

// 在函数的重载中, 实现函数是不能直接被调用的，只有在匹配之后，实现函数才能被调用
// add({name: "why"}, {age: 18})

export {};

11.联合类型和函数重载对比

image.png

就是如果能通过联合类型方便简单的实现的情况下，尽量使用我们的联合类型，因为更简单，因为无论string和数组，都有length属性，所以联合类型可以实现，实现起来很简洁，函数的重载反而有些麻烦。
如果通过联合类型发现实现起来非常麻烦的情况下，我才会使用函数重载。

// 实现方式一: 联合类型
function getLength(args: string | any[]) {
  return args.length
}

console.log(getLength("abc"))
console.log(getLength([123, 321, 123]))

// 实现方式二: 函数的重载
// function getLength(args: string): number;
// function getLength(args: any[]): number;

// function getLength(args: any): number {
//   return args.length
// }

// console.log(getLength("abc"))
// console.log(getLength([123, 321, 123]))