695 TypeScript函數類型：可選參數，默認參數，剩余參數，this類型，函數的重載，聯合類型和重載

TypeScript函數類型

---

TypeScript函數類型解析

---

參數的可選類型

---

默認參數

---

剩余參數

---

可推導的this類型

---

不確定的this類型

---

指定this的類型

---

函數的重載

---

sum函數的重載

---

聯合類型和重載

---

01_函數的類型.ts

// 1.函數作為參數時, 在參數中如何編寫類型
function foo() {}
type FooFnType = () => void

function bar(fn: FooFnType) {
  fn()
}

bar(foo)

// 2.定義常量時, 編寫函數的類型
// 【返回類型為void時，不報錯，因為這意味着函數可以返回任何類型。】
type AddFnType = (num1: number, num2: number) => number

// 【形參任意】
const add: AddFnType = (a1: number, a2: number) => {
  return a1 + a2
}

export {}

---

02_函數類型的案例.ts

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)

//  我的改造
type calcFnType = (n1: number, n2: number) => number

function calc2(n1: number, n2: number, fn: calcFnType) {
  return fn(n1, n2)
}

const sum = (a1: number, a2: number): number => a1 + a2
const mul = (a1: number, a2: number): number => a1 * a2

const res1 = calc2(10, 20, sum)
const res2 = calc2(10, 30, mul)
console.log(res1, res2)

---

04_參數的可選類型.ts

// 可選類型是必須寫在必選類型的后面的
// y -> undefined | number
function foo(x: number, y?: number) {
  console.log(x, y)
}

foo(20, 30)
foo(20)

export {}

---

05_參數的默認值.ts

// 參數順序：必傳參數 - 有默認值的參數 - 可選參數
function foo(y: number, x: number = 20) {
  console.log(x, y)
}

foo(30)

---

06_函數的剩余參數.ts

// 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))

export {}

---

07_this的默認推導.ts

// this是可以被推導出來 info對象(TypeScript推導出來)
const info = {
  name: 'why',
  eating() {
    console.log(this.name + ' eating')
  },
}

info.eating()

export {}

---

08_this的不明確類型.ts

type ThisType = { name: string }

// 【這個this參數要放在第一位。】
function eating(this: ThisType, message: string) {
  console.log(this.name + ' eating', message)
}

const info = {
  name: 'why',
  eating: eating,
}

// 隱式綁定
info.eating('哈哈哈')

// 顯示綁定
eating.call({ name: 'kobe' }, '呵呵呵')
eating.apply({ name: 'james' }, ['嘿嘿嘿'])

export {}

---

09_函數的重載(聯合類型).ts

/**
 * 通過聯合類型有兩個缺點:
 *  1.進行很多的邏輯判斷(類型縮小)
 *  2.返回值的類型依然是不能確定
 */
// 【聯合類型不能使用操作符+，a1、a2表示聯合類型，而不是取值為number或string。】
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_函數的重載(函數重載).ts

// 函數的重載: 函數的名稱相同, 但是參數不同的若干個函數, 就是函數的重載
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)
const result2 = add('abc', 'cba')
console.log(result)
console.log(result2)

// 在函數的重載中, 實現函數是不能直接被調用的
// add({name: "why"}, {age: 18})

export {}

---

11_函數的重載練習.ts

// 實現方式一: 聯合類型
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]))

---