当前位置:   article > 正文

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

ts 函数参数
  • 函数是一种特殊的对象,可以被调用。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 }
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
  • 函数参数的高级使用

    // 可选参数
    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
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
  • 函数的重载声明

    // 函数重载声明(一定要写在函数的上面,写在函数下面会报错)
    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) // 函数重载声明后,这行则会进行报错,不能混合传入
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/你好赵伟/article/detail/425558
推荐阅读
  

闽ICP备14008679号