②TypeScript 函数（可选参数，默认参数，剩余参数，函数重载）

川长思鸟来 2022-11-22 10:22 227阅读 0赞

### TypeScript ###

*  函数的定义
 *  方法可选参数
 *  默认参数
 *  剩余参数
 *  函数重载

--------------------

**写下博客主要用来分享知识内容，并便于自我复习和总结。  
如有错误之处，请各位大佬指出。**

--------------------

# 函数的定义 #

// 定义函数
    
        // es5定义函数的方法：
        // ①函数声明法
        function run(){ 
            return "run"
        }
        // ②匿名函数
        let run2 = function(){ 
            return "run2"
        }
    
        // ts中定义函数的方法：
        // ①函数声明法
        function run3():string{ 
            return "run3"
            // 错误写法：
            // return 123
        }
        // ②匿名函数
        let run4 = function():number{ 
            return 123
        }
        console.log(run4())
    
    // ts中定义方法传参
    
        // ①函数声明法
        function getInfo(name:string, age:number):string{ 
            return `${ name} --- ${ age}`
        }
        console.log(getInfo("王路飞",17))
    
        // ②匿名函数
        let getInfo2 = function(name:string, age:number):string{ 
            return `${ name} --- ${ age}`
        }
        console.log(getInfo2("孙鹏飞",22))
    
    // 没有返回值的方法
    
        // ①函数声明法
        function a():void{ 
            console.log("runA")
        }
        a()
    
        // ②匿名函数
        let b = function():void{ 
            console.log("runB")
        }
        b()

除此以外，在传参的时候，我们还可以传一个对象。如果我们想保证代码健壮性，我们只能这样加类型注解，否则报错：

function add({ one, two}:{ one:number, two:number}){ 
        return one + two;
    }
    const total = add({ one: 1, two: 2})

--------------------

# 方法可选参数 #

// es5里面方法的实参和形参可以不一样，但是ts中必须一样。
        // 如果不一样，就需要配置可选参数。
        function getInfo(name:string,age?:number):string{ 
            if(age){ 
                return `${ name} --- ${ age}`
            }else{ 
                return `${ name} --- 年龄保密`
            }
        }
        console.log(getInfo("王路飞"))
        console.log(getInfo("孙鹏飞",22))

这里需要注意一个问题：可选参数一定要配置到参数的最后面。如果反过来，如下例：

function getInfo2(age?:number,name:string):string{ 
            if(age){ 
                return `${ name} --- ${ age}`
            }else{ 
                return `${ name} --- 年龄保密`
            }
        }

我们可以看到ts会报错。  
![在这里插入图片描述][20201104101954737.png_pic_cnter]  
但其实在js中肯定是能编译通过的，因为它不涉及数据类型和参数问题：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]  
但当然ts推荐我们让可选参数配置到参数的最后面。其实道理很简单，既然可选参数在前面，那么假设只传递一个参数，那么这个参数到底是给哪个参数，编译器无从得知。因为这也许是给后面的参数（正确思路），又或者是给可选参数的（错误写法，因为少传递了参数），而TS肯定不想让这种情况发生，因为它就是为了解决这些不严谨性，让我们在编写代码时发现一切错误。

--------------------

# 默认参数 #

在es5里面没有办法设置默认参数，es6和ts中都可以设置默认参数。

在使用方法时，如果不传递参数就使用默认参数，如果传递参数就覆盖默认参数。

function getInfo(name:string,age:number=17):string{ 
        if(age){ 
            return `${ name} --- ${ age}`
        }else{ 
            return `${ name} --- 年龄保密`
        }
    }
    console.log(getInfo("孙鹏飞"))
    console.log(getInfo("王路飞",20))

--------------------

# 剩余参数 #

简例：

function sum(a:number,b:number,c:number):number{ 
        return a+b+c
    }
    console.log(sum(1,2,3))

这样数据一多，显然很麻烦。

三点运算符：接收新参传过来的值

function sum(...result:number[]):number{ 
        let sum = 0
        for(let i = 0; i < result.length; i++){ 
            sum += result[i]
        }
        return sum
    }
    console.log(sum(1,2,3,4,5,6))

--------------------

# 函数重载 #

Java中方法的重载，指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。而TypeScript中的重载，指的是通过为同一个函数提供多个函数类型定义来实现多种功能的目的，并且ts为了兼容es5以及es6重载的写法，导致它和java中的是有区别。

在es5里是这样的，如果出现同名函数，后面的函数就会覆盖上面的函数：

function getInfo(config){ 
        
    }
    function getInfo(config,value){ 
        
    }

在ts里，它是这样的：

function getInfo(name:string):string;
    function getInfo(age:number):number;
    function getInfo(str:any):any{ 
        if(typeof str === "string"){ 
            return "我是："+str
        }else{ 
            return "我的年龄："+str
        }
    }
    console.log(getInfo("张三"))
    console.log(getInfo(22))
    // 错误写法，因为不存在这样的同名函数中，有这样的数据类型
    // console.log(getInfo(true))

function getInfo(name:string):string;
    function getInfo(name:string,age:number):string;
    function getInfo(name:any,age?:any):any{ 
        if(age){ 
            return `我叫：${ name},我的年龄：${ age}`
        }else{ 
            return `我叫：${ name}`
        }
    }
    console.log(getInfo("张三"))
    console.log(getInfo("李四",22))

虽然重载看起来有点鸡肋，而且叫它重载好像又有点名不副实，但至少它会根据同名函数中设置的数据类型及参数去对传递的参数作出限制，并根据这点来作出不同的效果。

[20201104101954737.png_pic_cnter]: /images/20221120/ba0a8c0b49c84a4198b8c29c72958b61.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1NjEzOTMx_size_16_color_FFFFFF_t_70_pic_enter]: /images/20221120/dcd81624a8674ec3928675a4c65c3ffd.png