TypeScript函数介绍


TypeScript 函数

TypeScript函数介绍

函数是JavaScript应用程序的基础。 它帮助你实现抽象层,模拟类,信息隐藏和模块。 在TypeScript里,虽然已经支持类,命名空间和模块,但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能,让我们可以更容易地使用。


javaScript函数

和JavaScript一样,TypeScript函数可以创建有名字的函数和匿名函数。 你可以随意选择适合应用程序的方式,不论是定义一系列API函数还是只使用一次的函数。

通过下面的例子可以迅速回想起这两种JavaScript中的函数:


// Named function
function add(x, y) {
return x + y;
}

// Anonymous function
let myAdd = function(x, y) { return x + y; };


TypeScript函数

函数定义

TypeScript支持函数声明和函数表达式的写法。



//函数声明写法
function maxA(x:number,y:number):number {
return x>y?x:y;
}
//函数表达式
let maxB=function(x:number,y:number):number {
return x>y?x:y;
}


可选参数        

在JavaScript中,被调函数的每个参数都是可选的,在TypeScript中,被调函数的每个参数都是必传的,在编译时,会检查函数每个参数是否传值。        


function max(x:number,y:number):number {
return x>y?x:y;
}
let result1=max(2);//报错
let result2=max(2,4);//运行正常
TypeScript提供了可选参数语法,即在参数名旁加上?来使其变成可选参数。
function max(x:number,y?:number):number {
if(y){
return x>y?x:y;
}else{
return x;
}
}
let result1=max(2);//运行正常
let result2=max(2,4);//运行正常
function max(x:number,y:number):number {
return x>y?x:y;
}
let result1=max(2);//报错
let result2=max(2,4);//运行正常
TypeScript提供了可选参数语法,即在参数名旁加上?来使其变成可选参数。
function max(x:number,y?:number):number {
if(y){
return x>y?x:y;
}else{
return x;
}
}
let result1=max(2);//运行正常
let result2=max(2,4);//运行正常


可选参数必须位于必选参数的后面。        

默认参数        

typeScript还支持初始化默认参数。如果函数的某个参数设置了默认值,当该函数被调用时,如果没有给这个参数传值或者传的值为undefined时,这个参数的值就是设置的默认值。        


function max(x:number,y=4):number {
return x>y?x:y;
}
let result1=max(2);//运行正常
let result2=max(2,undefined);//运行正常
let result1=max(2,4);//运行正常

剩余参数        

当需要同时操作多个参数,或者并不知道会有多少参数传递进来时,就需要用到剩余参数。在TypeScript中,所有的可选参数都可以放到一个变量里。        


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

剩余参数包含的参数个数可以为0到多个。        

函数重载        

函数重载通过为同一个函数提供多个函数类型定义来达到实现多种功能的目的。TypeScript可以支持函数的重载。        


function css(config:{});
function css(config:string,value:string);
function css(cibfug:any,value?:any){
    if(typeof config=='string'){
        ...
    }else if(typeof config=='object'){
        ...
    }
}


箭头函数        

TypeScript提供的箭头函数(=>)在函数创建时就绑定了this,而不是在函数调用时。        


let gift=[
    gifts:["one","two","three","four","five"],
    giftPicker:function(){
        return ()=>{
            let pickedNumber=Math.floor(Math.random()*6);
            return this.gifts[pickedNumber];
        }
    }
]
let pickGift=gift.giftPicker();
console.log("you get a"+pickGift());


您可以选择一种方式赞助本站

    A+
发布日期:2020/5/13 20:10:46  所属分类:  
标签:
  • 版权声明:牛蓝网