学习TS(3)函数类型

「这是我参与2022首次更文挑战的第32天，活动详情查看：2022首次更文挑战」。

TypeScript 函数

• TypeScript函数与JavaScript函数的区别

TypeScript	JavaScript
含有类型	无类型
箭头函数	箭头函数
函数类型	无函数类型
必选和可选参数	所有参数都可选
默认参数	默认参数
剩余参数	剩余参数
函数重载	无函数重载

函数的两种声明方式

• 通过 function 关键字来进行声明

function sum(a:string,b:string):string{
    return a+b;
}
sum('a','b')

// 可以限制函数的参数和返回值类型

• 通过表达式方式声明

type Sum = (a1:string,b1:string) => string;

let sum:Sum = (a:string,b:string) => {
    return a+b;
}

可选参数

• 在函数声明时,可以通过 ? 号来定义可选参数 比如 b?:string 这种形式. 在实际使用时,需要注意的事可选参数要放在普通参数的后面,不然会导致编译报错

let sum = (a:string,b?:string):string => {
    return a+b;
};

sum('a'); // 可选参数必须在其他的参数的最后面

默认参数

let sum = (a:string,b:string = 'b'):string =>{
    return a+b;
}
sum('a')

剩余参数

const sum = (..args:string[]):string =>{
    return args.reduce((memo,current)=> memo += current, '')
}
sum('a','b','c','d');

函数的重载

• 函数重载或者方法重载都是使用相同名称和不同参数数量或类型创建多个方法的一种能力

function toArray(value:number):number[]
function toArray(value:stringstring):number[]
function toArray(value:number|string){
    if(typeof value == 'string'){
        return value.split('');
    }else{
        return value.toString().split('').map(item => Number(item));
    }
}

toArray(123); // 根据传入不同类型的数据 返回不同的结果
toArray('123');

在以上代码中，我们为 toArray 函数提供了多个函数类型定义，从而实现函数的重载。在 TypeScript 中除了可以重载普通函数之外，我们还可以重载类中的成员方法。

方法重载是指同一个类中方法同名,参数不同(参数不同,参数个数不同或参数个数相同时参数的先后顺序不同),调用时根据实参的形式,选择与它匹配的方法执行操作的一种技术.所以类中成员方法满足重载的条件是: 同一个类中,方法名相同参数列表不同;

class Calculator {
    add(a:number,b:number):number;
    add(a:string,b:string):string;
    add(a:string,b:number):string;
    add(a:number,b:string):string;
    type Combinable = string | number;
    add(a:Combinable,b:Combinable){
        if(typeof a === 'string' || typeof b === 'string'){
            return a.toString() + b.toString();
        }
        
        return a+b;
    }
};

const calculator = new Calculator();
const res = calculator.add('大飞今年',"18");
console.log(res);