TS笔记 - 02函数 function

函数

1.函数的定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// 函数声明法
function run():string{
  return '123';
}

// 定义声明法
var run = function():string{
  return '123';
}

// 定义参数
function getInfo(name:string,age:number):string{
  return `${name} + ${age}`;
}

//没有返回值的方法
function run():void{
  console.log('run');
}

2.方法可选参数 ?

1
2
3
4
5
function getInfo(name:string,age?:number){}
getInfo('zhangsan');

//可选参数必须放在最后面
function getInfo(name?:string,age:number){} //错！

3.默认参数

1
2
3
4
function getInfo(name:string,age?:number=20){
  console.log(name+age);
}
getInfo('zhangsan');

4.剩余参数

1
2
3
4
5
6
7
8
9
10
11
12
13
function sum(a:number,b:number,c:number:d:number):number{
  console.log(a+b+c+d);
}
sum(1,2,3,4);

// 三点运算符 接收新参传过来的值
function sum(...result:number[]):number{
  //
}
function sum(a:numerb,...result:number[]):number{
  //
}
sum(1,2,3,4);

5.函数重载

两个或两个以上同名函数，但他们的参数不一样，这时会出现函数重载的情况。通过为同一个函数提供多个函数类型定义来试下多种功能的目的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
//ES5中出现同名方法，下面的会替换上面的方法
function css(){}
function css(){}

//ts中重载 - 1
function getInfo(name:string):string{}
function getInfo(age:number):number{}
function getInfo(str:any):any{
  if(typeof str === 'string'){
    return name;
  }else{
    return str;
  }
}
getInfo('test'); //正确
getInfo(20);
getInfo(true);//错误

//ts中重载 - 2
function getInfo(name:string):string{}
function getInfo(name:string,age:number):string{}
function getInfo(name:any,age?:any):any{
  if(age){
    return '我叫'+name+'年龄'+age;
  }else{
    return '我叫'+name;    
  }
}
getInfo('test'); //正确
getInfo(123); //错误
getInfo('test',20); //正确

6. 箭头函数

1
2
3
//ES5
setTimeout(()=>{  
},500)