TypeScript入门---函数声明

上篇文章提到过ts变量类型的声明，本篇将介绍ts中函数类型的声明。

ts基础环境搭建可参考上一篇文章：“TypeScript入门---变量声明”
https://www.jianshu.com/p/43096fa5902e

1.首先在ts中声明函数最基本的两种方式：

function sum(x: number, y: number) {
    return x + y
}

sum(3, 4) //接收参数类型只能是数字，否则报错

let mySum = function(x: number | string, y: number | string) {
    x = Number(x); //上方参数类型添加了字符串类型，必须在内部进行数据类型转换处理。
    y = Number(y);
    return x + y  //若不处理，则不可以使用“+”运算符，number和string类型混用运算符会报错。
}

mySum('1', 2) //可接收number和string两种类型的参数。

2.我们也可以在声明函数的同时规定函数的返回值

//在声明函数的同时声明参数类型和函数返回值类型
let mySum = function(x:number | string, y:number | string):number {
    x = Number(x);
    y = Number(y);
    return x + y
}
//或在声明前添加泛式定义
let mySum: (x:number | string, y:number | string) => number = function(x, y) {
    x = Number(x);
    y = Number(y);
    return x + y
}

3.在实际运用当中有时候某种泛式定义可能会被多次用到，或者比较复杂冗长，反复使用会很麻烦且造成代码冗余，这个时候我们可以引入interface来统一定义接口。

// 定义接口
interface SearchFunc {
    (source: string, subString: string): boolean //(参数名:参数类型,参数名:参数类型):函数返回类型
}

let mySearch: SearchFunc = function(source, subString) {
    return source.search(subString) != -1
}

//如果你想，你也可以在引用了函数定义接口后再对函数进行二次定义，但也必须前后定义相同，一旦出现冲突，就会报错。

let mySearch: SearchFunc = function(source:string, subString:string) :boolean {
    return source.search(subString) != -1
}

4.可选参数
在ts如果你已经尝试过上面的步骤，你应该已经发现了一个问题，ts语法相对严格，你声明函数时规定了几个参数，你调用时就必须传入几个参数，否则报错。但有时候我们希望个别参数在调用时可传可不传，这个时候我们就要用到可选参数。

// 可选参数
function buildName(firstName: string, lastName?: string) { //参数后加?标示该参数可传可不传

}

let myName = buildName('William', 'W');
let yourName = buildName('William'); //若声明时不加?，则这种调用方法直接报错。

//注意：可选参数一定要放在后面，多参数时一定不能第一个参数起就是可选参数，这样会引起歧义。
function buildName(firstName?: string, lastName: string) { //如果我们这么写，直接报错

}

//另外一种方法
let myName = buildName('William', 'W');
let yourName = buildName('William');

function push(array:any[], ...items:any[]) { //...items表示后面接收到的所有参数
    items.forEach( item => {
        array.push(item)
    })
}

let arr:Array<any> = [];
push(arr, 1, 2, 3, 4, 5, undefined, '5', true)
console.log(arr) //[ 1, 2, 3, 4, 5, undefined, '5', true ]

5.函数的重载
前面提到我们可以在声明函数的时候定义参数的类型和函数的返回类型，但是当我们用联合声明的方式声明了一个参数会同时存在多种类型且函数可能存在多种返回值的时候，如果我们想让参数类型和函数返回类型一一对应，那我们就可以用到函数的重载。

//联合声明
function reverse(x: number | string ) : number | string {
    if(typeof x === 'number'){
        return Number(x.toString().split('').reverse().join())
    } else {
        return x.toString().split('').reverse().join()
    }
}
//但如果我们想在声明时就明确入参number对应返回number，入参string对应返回string，就需要用到下面的方法了。
// 函数的重载
function reverse(x: number ):number;
function reverse(x: string ):string; //提前声明两个同名函数，确定入参和返回值。
function reverse(x: number | string ) : number | string {
    if(typeof x === 'number'){
        return Number(x.toString().split('').reverse().join())
    } else {
        return x.toString().split('').reverse().join()
    }
}