TypeScript函数使用

2019-08-02  本文已影响0人  浅夏晴空

使用函数

有可选参数的函数

与JavaScript不同,调用函数时传的参数的数量或者类型不符合函数中定义的参数要求是,TypeScript编译器会报错;如:

add = (foo:number,bar:number,foobar:number):number => {
    return foo+bar+foobar;
}
add(); //提供的参数不匹配函数的签名
add(1,2);//提供的参数不匹配函数的签名
add(1,2,3); 返回6

在一些场景下我们不需要传所有的参数;TypeScript一个函数可选参数的特性;

在TypeScript中通过在函数参数后面追加一个?,指定参数是可选的

add = (foo:number,bar:number,foobar?:number):number => {
    return foo+bar+foobar;
}
add(); //提供的参数不匹配函数的签名
add(1,2);返回3
add(1,2,3); 返回6

有默认参数的函数

当函数有可选参数时,我们必须检测参数是否被传递了 如:

add = (foo:number,bar:number,foobar?:number):number => {
    return foo+bar+(foobar !== undefined ? foobar : 1 );
}

这样来做并没有错,但是可以通过提供foobar的参数的默认值,来替代标记其为可选参数,以改善可读性

add = (foo:number,bar:number,foobar:number=1):number => {
    return foo+bar+foobar;
}

在声明函数签名时使用=提供一个默认值,即可指定函数参数是可选的;TypeScript编译会在JavaScript输出结果中生成一个if结构,在foobar参数没有传递函数时设置一个默认值;

function add(foo, bar, foobar){
    if(foobar === void 0){
        foobar = 1;
    }
    return foo+bar+foobar;
}

void 0是TypeScript编译器检测一个变量是否为undefined的用法;

有剩余参数的函数

add = (foo:number,bar:number,foobar:number=1):number => {
    return foo+bar+foobar;
}

如果想调用add传递更多个参数该如何解决呢?

使用剩余参数,剩余参数语法允许把不限量的参数表示为一个数组

add = (...foo:number[]):number => {
    let res = 0;
    for(let i=0; i < foo.length; i++){
        res += foo[i];
    }
    return res;
}
用...foo替换了参数foo、bar、foobar;一个剩余参数必须包含一个数组类型,否则会出现编译错误;
add(); //return 0
add(1); //return 1
add(1,2,3,4,5); //return 15
上一篇 下一篇

猜你喜欢

热点阅读