TypeScript教程(四)函数类型

函数类型的约束支持有函数本身的参数约束和返回值约束，如果想支持联合类型的函数关系可以使用重载的方式。

接下来声明一个参数约束和返回值约束的函数，代码示例如下：

function funcType(name:string,age:number):number{
    return age
}
let ageNum:number=funcType("张三",18);

注意上面代码加粗的地方，funcType函数的参数name为string类型，age为number类型，那么在调用该函数的时候传值必须是相对应的类型，funcType(name:string,age:number)冒号后面的number代表该函数返回的类型必须是number类型，由于funcType函数返回的是number类型，变量ageNum的类型必须也是number类型。

如果函数的参数出现了可选参数可以使用问号来进行约束，代码示例如下：

function funcType(name:string,age:number,gender?:string):string{
    return name
}

funcType("张三",18,"男");
funcType("张三",18);

注意上面代码加粗的地方funcType函数的第三个参数gender是可选参数，在调用该函数时可以传值也可以不传值。

如果函数的参数不确定怎么办呢？可以使用扩展运算符的方式来定义动态参数，代码示例如下：

function dynFuncType(name:string,age:number,...args:any):any{
    console.log(args);//结果：[“11”,”22”,33]
    return args
}
let dynUser:any=dynFuncType("张三",18,"11","22",33);

注意上面代码加粗的地方在dynFuncType函数的第三个参数的位置使用...args:any的方式定义动态参数由于未来参数的类型不确定所以使用any定义类型，这样就实现了动态参数，这种方式和ES6是一样的。

函数的参数也可以设置默认值，这一点和ES6是一样的，区别就是要给参数设置一个类型约束。看一下代码示例：

function funcType(name:string="张三",age:number=18):number{
    return age;
}

看一下上面代码加粗的地方，funcType函数的第一个参数name的类型为string，默认值为“张三”，第二个参数age的类型为number，默认值为“18”，注意这个函数返回的类型是number类型，所以返回的参数是age而不是name。

也可以声明表达式类型的函数，代码示例如下：

let funcType:(name:string,age:number)=>number=function(name:string=”张三”,age:number=20):number{
    return age
}

注意上面代码加粗的地方，声明变量funcType约束的类型是一个箭头函数，这个箭头函数有两个参数第一个参数name约束类型为string，第二个参数age约束类型为number，返回值的类型为number，接下来在声明函数的时候就要按照这个约束来声明可以看到function()的第一个参数是name类型为string,，默认值为“张三”，第二个参数为age类型为number，默认值为20，返回的值是age参数其类型为number。

也可以使用接口来约束函数，代码示例如下：

interface IFuncType{
    (name:string,age:number):number;
}
let funcType:IFuncType=function(name:string,age:number):number{
    return age;
}

看一下代码加粗的地方，接口IFuncType约束类型和表达式函数的约束类型格式类似只是将“=>”换成了“:”，意思是约束一个函数有两个参数第一个参数为name约束的类型为string，第二个参数为age约束的类型为number，返回值的类型为number，接下来在变量funcType使用该接口并且声明函数，声明的函数约束格式必须与接口对应。

对于联合类型的函数，可以使用重载的方式实现，代码示例如下：

//重载
function getValue(value:number):number;
function getValue(value:string):string;
//联合类型的函数
function getValue(value:string|number):string|number{
    return value;
}
let val:string=getValue("张三");
let val2:number=getValue(18);

注意上面代码加粗的地方，声明联合类型的函数getValue其参数value约束的类型为string或number，返回值的类型也是string或number，接下来声明变量val类型为string，调用函数getValue(“张三”)，传参为string类型。再声明一个变量val2类型为number，调用函数getValue(18)，传参为number类型。这时会报错，需要使用重载来解决这个问题：

//重载
function getValue(value:number):number;
function getValue(value:string):string;

以上代码为函数的重载，只需要重新定义函数及参数类型和返回值的约束即可，需要注意的是重载函数参数的类型及返回类型必须是联合类型函数的参数类型及返回类型，而且必须在联合类型函数的上方定义。

如果函数没有返回值可以使用void来定义，代码示例如下：

//void规定函数没有返回值
function fun():void{
    let age=20
}

注意上面代码加粗的地方，在fun函数中并没有return返回值所以使用void来规定。