美文网首页
TypeScript函数使用

TypeScript函数使用

作者: 浅夏晴空 | 来源:发表于2019-08-02 17:09 被阅读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

相关文章

  • TypeScript函数使用

    使用函数 有可选参数的函数 与JavaScript不同,调用函数时传的参数的数量或者类型不符合函数中定义的参数要求...

  • TypeScript 函数

    TypeScript 函数 函数类型 为函数定义类型 使用这种方式,为函数定义返回的类型 书写函数类型 书写函数类...

  • TypeScript学习笔记之六函数(重点箭头函数)

    一、使用环境 Mac 电脑 WebStorm TypeScript3.x版本 二、基本函数 2.1、函数声明定义 ...

  • TypeScript报错找不到方法 escape

    在typescript中使用escape 和 unescape函数时,报错Cannot find name 'es...

  • typescript md5

    typescript 项目中 使用MD5函数加密字符串 使用 hex_md5() 函数内部已经对字符串先进行utf...

  • typescript语法

    参考:typescript参考1 typescript参考2 函数参数类型定义 声明函数参数默认值 ...

  • TypeScript函数调用签名

    TypeScript函数调用签名 函数在本质是一个对象,但特殊地方在于函数是可调用的对象。因此,可以使用对象类型来...

  • Typescript入门之:类

    Typescript 类 传统的JavaScript程序使用函数和基于原型的继承来创建可重用的组件,但对于熟悉使用...

  • TypeScript 旅途4:函数

    在JavaScript中,函数是一等公民。在TypeScript中虽然已经支持类,命名空间和模块,但函数的使用频率...

  • TypeScript函数构造签名

    TypeScript函数构造签名

网友评论

      本文标题:TypeScript函数使用

      本文链接:https://www.haomeiwen.com/subject/nyfrdctx.html