【TypeScript】函数扩展

1. 函数定义类型和返回值

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

2. 函数默认参数和可选参数

// 没有传入参数时才去使用默认参数
function add(a:number = 10, b:number = 20):number {
  return a + b
}
// 有可选参数时不能有默认参数，严格模式下可选参数会报错
function add1(a: number = 10, b?: number): number {
  return a + b
}
console.log(add1(1)); // 1 + undefined => NaN
add(1) // 21

3. 定义对象参数

interface User {
  name: string,
  age: number
}
function add(user: User):User {
  return user
}
console.log(add({name: 'zhangsan', age: 18}));
// { name: 'zhangsan', age: 18 }

4. 函数 this 类型

interface Obj {
  user: number[],
  add: (this:Obj, num:number) => void
}
// ts 可以定义 this 的类型，在 js 中无法使用，必须是第一个参数定义 this 的类型
let obj: Obj = {
  user: [1, 2],
  add(this: Obj, num: number) {
    this.user.push(num)
  },
}
obj.add(4)
console.log(obj);
//{ user: [ 1, 2, 4 ], add: [Function: add] }

5. 函数重载

let user: number[] = [1, 2, 3, 4, 5]
function findNum(add: number[]): number[]
function findNum(id: number): number[]
function findNum(): number[]
// ts 中，|（竖线）用于联合类型（Union Types）。它用于声明一个变量可以是多种类型之一。例如，ids?: number | number[] 表示 ids 可以是一个数字或者是一个数字数组。
// ||（双竖线）是 JavaScript 中的逻辑或运算符，用于判断表达式的真假。例如，a || b 表示如果 a 为真，则结果为 a，否则结果为 b。
function findNum(ids?: number | number[]): number[] {
  if (typeof ids == 'number') {
    return user.filter(v => v == ids)
  } else if (Array.isArray(ids)) {
    user.push(...ids)
    return user
  } else {
    return user
  }
}
console.log(findNum());//[1, 2, 3, 4, 5]
console.log(findNum(3));//[ 3 ]
console.log(findNum([2, 3, 4]));//[1, 2, 3, 4, 5, 2, 3, 4]