3. TS 函数完整版

145 阅读1分钟

1. 函数可选参数

es5 里面的方法的实参和行参可以不一样,但是在 TS 中必须要一样,如果要不一样需要进行配置可选参数

注意:可选参数必须配置到参数的最后面,必须参数不能放到可选参数后面

function box(name:string, age?: number):string{
    if(age) {
        return `${name}---${age}`
    } else {
        return `${name}`
    }
}
alert(box('gg', 6))  // gg---6

// 可选参数必须配置到参数的最后面, 必须参数不能放到可选参数后面
function box1(name?:string, age:number):string{
    if(name) {
        return`${name}---${age}`
    }else {
        return `${name}`
    }
}
alert(box1('xl', 18)) 

2. 默认参数

es5 里面没法设置默认参数,es6 和 ts 中都可以设置默认参数

function box(name:string, age:number= 20):string{
    return `${name}---${age}`
}
alert(box('默认参数'))  // 默认参数---20
alert(box('默认参数', 7))  // 默认参数---7

3. 剩余参数

function box(a:number, b:number, c:number):number{
    return a+b+c
}
alert(box(1, 2, 3))  // 6


function box(...result:any):number{
    let sum = 0;
    for(var i = 0; i<result.length;i++) {
        sum+= result[i]
    }
    return sum
}
alert(box(1, 2, 3, 4, 5, 6))  // 21


function box(a, ...result:any):number{
    let sum = a;
    for(var i = 0; i<result.length;i++) {
        sum+= result[i]
    }
    return sum
}
alert(box(1, 2, 4, 8))  // 15

4. 函数重载

定义:java 中方法的重载:指的是两个或者两个以上的同名函数,但他们的参数不一样,这时会出现函数重载的情况
TS 中函数重载:通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
TS 为了兼容 ES5、6, 重载的写法和 java 中还是有区别的。

 ES5 函数重载的话,下面的函数会覆盖上面的函数
function box(config) {}
function box(config, value) {}




function box(name:string):string;
function box( age:number) :string;
function box(str:any):any{
    if(typeof str === 'string') {
        return `name: ${str}`
    }else {
        return `age: ${str}`
    }
}
alert(box('gg')) // name: gg
alert(box(6))  // age: 6