三、Typescript函数

es5定义函数的方法

// 函数声明
function fun(){
    return 'fun';
}
// 匿名函数
let fun2 = function(){
    return 'fun2'
}

ts中定义函数的方法

// 函数声明
function fun(): string {
    //string代表函数返回的数据的类型时string,如果不一致会报错
    return 'fun';
}
//没有返回值的方法
function noReturn(): void {
}
// 匿名函数
let fun2 = function(): number {
    return 123;
}

//调用方法
fun2();

ts中定义方法传参

es5中形参和实参可以不一致，但是ts中必须一样，如果不一样需要配置可选参数

//可选参数:参数后面加上问号,可传可不传(可选参数必须配置在最后面)
function fun(name:string,age?:number): string {
    if(age){
        return `${name}---${age}`;
    }else {
        return `${name}`;
    }
}
console.log(fun('张三',30));
//默认参数:有默认参数,调用的时候可以不传这个值
let fun2 = function(name:string,age:number=20): number {
    return `${name}---${age}`;
}
fun2('李四')
//剩余参数
function sum(a:number,b:number,c:number,d:number): number{
    return a+b+c+d;
}
sum(1,2,3,4);
function sum(a:number,...result:number[]): number{
    let sum = a;
    result.forEach(item:number => {
        sum += item;
    })
    return sum;
}
sum(1,2,3,4);

函数重载

ts中的重载,通过同一个函数提供多个函数类型定义来实现多种功能

// es5中同名方法下面的会替换上面的方法
function css(config){
}
function css(config,value){
}

ts中的重载--参数一样

function info(label:string):string;
function info(value:number):string;
function info(config:any):any{
    if(typeof config === 'string'){
        return `name + ${config}`;
    }else {
        return `age + ${config}`;
    }
}
info('张三');
info(42);
info(true);//错误写法,编译报错

ts中的重载--参数不一样

function info(label:string):string;
function info(label:string,value:number):string;
function info(label:any,value?:any):any{
    if(value){
        return `name + ${config}`;
    }else {
        return `age + ${config}`;
    }
}
info('张三');
info(42);//错误写法
info('张三',true);//错误写法