函数的类型
函数声明有两种，一种是函数声明，一种是函数表达式声明：
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
