初学TypeScript03（函数讲解）

学习笔记，怕自己学过忘了，再次看到可以加深

函数声明以及函数表达式

es5 写法

function test(){} 
var test = function(){}

typescript写法 void类型表示函数没有返回

function test():void{} 
var test = function():void{}

带参数的typescript

带有参数的函数，形参有几个 实参必须传递 否则typescript报错

function person(name:string,age:number):string{
	return `我叫${name},今年${age}岁`
}
person('xiaoming',18) //正确
person('xiaoming') //错误
person('xiaoming',18,99) //错误

可选参数

可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了,可选参数写法加一个问号 例如age?:num

var person = function(name:string,age:number,score?:number):string{
	return `${name}---${age}--${score}`
}
person('xiaoming',18) //正确
person('xiaoming',18,99) //正确

默认参数

var person = function(name:string,age:number,score:number=0):string{
	return `${name}---${age}--${score}`
}
person('xiaoming',18) //正确 输出 xiaoming--18--0
person('xiaoming',18,99) //正确 输出 xiaoming--18--99

剩余参数

es6中可以用...arr 来获取剩余参数，typescript中用法一致

function sum(...arr:number[]):number{
	let sum = 0 
    arr.forEach(item=>{
    	sum+=item
    })
    return sum
}
sum(1,2,3,4) //10
sum(1,2,3,4,5) //15

函数重载

在es5中如果定义名字相同的函数名称 那么后者会覆盖前者

functiong test(){
	console.log(111)
}
functiong test(){
	console.log(222)
}
test() //输出222

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

function test(x:string):string;
function test(x:number):number;
function test(x:any):any{
	if(typeof x === 'string'){
    	return '我的名字'+x
    }else{
    	return '我的年龄'+x
    }
}
test('xiaoming') //我的名字xiaoming
test(18) //我的年龄18
//当然也可以用联合类型 从阮一峰老师那看到的
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('');
    }
}