typeScript基础(7)_函数的类型

函数的类型

函数声明有两种，一种是函数声明，一种是函数表达式声明：

1.JS函数声明:

function funName(c1, c2) {
    return c1 + c2
}

2.JS函数表达式声明:

const funName = function (c1, c2) {
    return c1 + c2
}

1.TS函数声明：

function funName(c1: string, c2: string): string {
    return c1 + c2
}

2.TS函数表达式声明:

var funName1 = function (c1: string, c2: string): string {
    return c1 + c2
}

其实ts会自动的给我们funName1这个变量赋予类型：

var funName1:(c1:string,c2:string)=>string = function (c1: string, c2: string): string {
    return c1 + c2
}

箭头函数：

var funName1 = (c1: string, c2: string): string => c1 + c2;
var funName1: (c1: string, c2: string) => string = (c1: string, c2: string): string => c1 + c2

这里面的两个 =>含义是不一样的 ：
1：(c1:string,c2:string)=>string 表示返回的类型；
2: (c1: string, c2: string): string=> c1 + c2 表示箭头函数的返回值；

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
在 ES6 中，=> 叫做箭头函数，

3.TS用接口定义函数的形状

interfaces:

interface myFunInterfaces {
    (c1: string, c2: string): string
}
var funName1: myFunInterfaces
funName1 = (c1: string, c2: string): string => c1 + c2

函数入参个数

一旦规定入参个数，就不能多也不能少，For example:

var funName1 = (c1: string, c2: string): string => c1 + c2
funName1('1','2','3') //产生报错
funName1('1')  //产生报错

可选参数

表示该参数可传可不传，不会产生报错，For example :

函数声明：

function myName1(c1: string, c2?: string): string {
    return c1 + c2 ? c2 : 'xxx'
}

函数表达式：

var funName1 = (c1: string, c2?: string): string => c1 + c2 ? c2 : 'xxx'
var funName1: (c1: string, c2?: string)=> string = (c1: string, c2?: string): string => c1 + c2 ? c2 : 'xxx';

接口形式：

interface myFunInterfaces {
    (c1: string, c2?: string): string
}
var funName1: myFunInterfaces
funName1 = (c1: string, c2?: string): string => c1 + c2 ? c2 : 'xxx'

参数默认值

表示该参数没有传，但是用到了，使用这个默认值
函数声明：

function myName1(c1: string, c2: string = '123'): string {
    return c1 + c2 ? c2 : 'xxx'
}

myName1('666')  //666123

函数表达式：

var funName1 = (c1: string, c2: string='123'): string => c1 + c2 ? c2 : 'xxx'
var funName1: (c1: string, c2?: string ) => string = (c1: string, c2: string = '123'): string => c1 + c2 ? c2 : 'xxx';

funName1('666')  //666123

接口形式：

interface myFunInterfaces {
    (c1: string, c2?: string): string
}
var funName1: myFunInterfaces
funName1 = (c1: string, c2: string = '123'): string => c1 + c2 ? c2 : 'xxx'
funName1('666')  //666123

剩余参数

var fun = (c1: number, ...arr: Array<number>): number => {
    arr.forEach(i=>c1+=i)
    return c1
}
console.log(fun(2, 3, 4, 5, 6, 7, 8)); //35

重载

重载允许一个函数接受不同数量或类型的参数时，作出不同的处理

// 重载允许一个函数接受不同数量或类型的参数时，作出不同的处理。
//联合类型：
var myfun1 = (strOrNum: string | number): number | string => {
    if (typeof strOrNum === 'number') {
        return Number(strOrNum.toString().split('').reverse().join(''))
    } else if (typeof strOrNum === 'string') {
        return strOrNum.split('').reverse().join('')
    }
}

console.log(myfun1(1234567));//7654321
console.log(myfun1('asdfghj'));//jhgfdsa

然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。

这时，我们可以使用重载定义多个 myfun1的函数类型：

//联合类型：
var myfun1: ((strOrNum: string) => string) | ((strOrNum: number) => number) | ((strOrNum: string | number) => number | string);

myfun1 = (strOrNum: string | number): number | string => {
    if (typeof strOrNum === 'number') {
        return Number(strOrNum.toString().split('').reverse().join(''))
    } else if (typeof strOrNum === 'string') {
        return strOrNum.split('').reverse().join('')
    }
}

console.log(myfun1(1234567));
console.log(myfun1('asdfghj'));

重载前：

function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

重载后：

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 if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

参考：https://www.bookstack.cn/read/typescript-tutorial-202005/basics-type-of-function.md