TypeScript使用总结04 - 函数

函数类型

以下是一个正常的函数

function hello(name:string):void{
    console.log('hello',name)
}
hello('zhufeng')

以下是一个函数的类型

type GetName = (firstName:string,lastName:string)=>void;
let getName:GetName = function(firstName:string,lastName:string):string{
    // return firstName+lastName;
}

下面我们看到age形参的后面带了一个问号，这代表age是number类型。但是你调用这个方法的时候，你可以选择不传递age。这个方法也能正常执行。

function print(name:string,age?:number):void{

}
print('guoming',11)
print('guoming')

下面这个方法，我们会给method这个形参添加一个默认值。这就代表我们可以不专门给method传递值，他还是会显示默认值'/'

function ajax(url:string,method:string='GET'){
    console.log(url,method)
}
ajax('/')

function sum(...numbers:number[]){
    return numbers.reduce((val,item)=>val+item,0)
}
console.log(sum(1,2,3))

函数的重载

什么叫做重载？当两个或者两个以上的函数，参数不一样，也就是给同一个函数，提供多个函数定义，在这个地方上面我们对函数做的操作叫做重载。

let obj:any= {}
/*
* 如果传递的参数是字符串，赋值给obj.name
* 如果传递的参数是数字，赋值给obj.age
*/
function attr(val:string):void;
function attr(val:number):void;
function attr(val:any):void{
    if(typeof val === 'string'){
        obj.name = val;
    }else if(typeof val === 'number'){
        obj.age = val
    }
}

值得注意的是，函数的声明和函数的实现应该要紧紧的贴在一起，这个是一种编程规范。或者说，我们可以像下面一样的写，如果说需要重载的函数本质上并不复杂的话。

function att2(val:string|number):void{
    if(typeof val === 'string'){
        obj.name = val;
    }else if(typeof val === 'number'){
        obj.age = val;
    }
} 
att2('guoming')
att2(10)
att2(true) // 报错

Compose函数重载案例

有一个非常著名的TypeScript函数重载案例就是React的Redux下面的Compose函数。有兴趣的同学可以区github研究他的源码。