TypeScript 函数的详细使用（默认参数、可选参数、剩余参数、重载声明）

• 函数是一种特殊的对象，可以被调用。TS 里的函数和 原生、ES6 里的函数差不太多，只是多了一些其他功能。

• 函数的简单使用

  // js
  // 命名函数
  function add (x, y) { return x + y }
  // 匿名函数
  const add1 = function (x, y) { return x + y }
  
  // ts
  // 命名函数
  function add (x: number, y: number): number { return x + y }
  // 匿名函数
  const add1 = function (x: number, y: number): number { return x + y }
  
  // 完整的函数写法：const add2: 函数类型 = 符合函数类型的值
  const add2: (x: number, y: number) => number = function (x: number, y: number): number { return x + y }
  

• 函数参数的高级使用

  // 可选参数
  function add (x: number, y: number, z?:number): number {
    return x + y + (z || 0)
  }
  console.log(add(1, 10)) // 11
  console.log(add(1, 10, 5)) // 15
  
  // 默认参数
  function add1 (x: number, y: number = 10, z?:number): number {
    return x + y + (z || 0)
  }
  console.log(add1(1)) // 11
  
  // 剩余参数
  function add2 (x: number, ...args: number[]) {
    // console.log(x)    // 1
    // console.log(args) // [2, 3, 4, 5]
    let total = x
    args.forEach(item => { total += item })
    return total
  }
  console.log(add2(1, 2, 3, 4, 5)) // 15
  
  
  // 参数支持多种传入类型
  function add3 (x: string| number, y: string|number): number {
    return Number(x || 0).valueOf() + Number(y || 0).valueOf()
  }
  console.log(add3('1', '10'))  // 11
  console.log(add3(1, '10'))    // 11
  
  // 返回值支持多种返回类型
  function add4 (x: string, y: string, flag: boolean): number|string {
    if (flag) {
      return x + y
    } else {
      return parseInt(x) + parseInt(y)
    }
  }
  console.log(add4('1', '10', true))   // '110'
  console.log(add4('1', '10', false))  // 11
  

• 函数的重载声明

  // 函数重载声明（一定要写在函数的上面，写在函数下面会报错）
  function add (x: string, y: string): string
  function add (x: number, y: number): number
  
  // 定义一个函数，如果传入都是字符串那么拼接，如果都是数字那么相加
  function add (x: string | number, y: string | number): string | number {
    if (typeof x === 'string' && typeof y === 'string') {
      return x + y // 字符串拼接
    } else if (typeof x === 'number' && typeof y === 'number') {
      return x + y // 数字相加
    }
  }
  
  // 这两种是没问题的，每次传入的两种参数类型一致
  add(1, 1)
  add('1', '1')
  // 但是下面这两种混合传入就有问题了，如果不希望传入这样的混合格式，那么就需要函数重载声明一下，进行报错
  // 如果不声明，下面这种混合传入也不会报错
  add(1, '1') // 函数重载声明后，这行则会进行报错，不能混合传入
  add('1', 1) // 函数重载声明后，这行则会进行报错，不能混合传入