ts学习03-函数

函数的定义

//es5定义函数的方法
//函数声明法
function run() {
  return "run";
}
//匿名函数
var run2 = function () {
  return "run2";
};
//ts中定义
//函数声明法
function run(): string {
  return "run";
}

//错误写法
function run2(): string {
  return 123;
}

//匿名函数
var fun2=function():number{

    return 123;
}
console.log(fun2());
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

可选参数

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

//ts中定义方法传参
function getInfo(name: string, age: number): string {
  return `${name} --- ${age}`;
}

console.log(getInfo("zhangsan", 20));

var getInfo2=function(name:string,age:number):string{

    return `${name} --- ${age}`;
}

console.log(getInfo2('zhangsan',40));

 // es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数 
 function getInfo(name: string, age?: number): string {
  if (age) {
    return `${name} --- ${age}`;
  } else {
    return `${name} ---年龄保密`;
  }
}

console.log(getInfo("zhangsan")); //zhangsan---年龄保密

console.log(getInfo("zhangsan", 123)); //zhangsan---23
//注意:可选参数必须配置到参数的最后面
//错误写法
/*
function getInfo(name?:string,age:number):string{
         if(age){
             return `${name} --- ${age}`;
         }else{
             return `${name} ---年龄保密`;
         }
 }
 alert(getInfo('zhangsan'))
*/
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
32
33
34
35
36
37
38
39
40
41
42
43
44

默认参数

默认参数也可以理解为是另一种形式的可选参数

// es5里面没法设置默认参数，es6和ts中都可以设置默认参数
function getInfo2(name: string, age: number = 20): string {
  if (age) {
    return `${name} --- ${age}`;
  } else {
    return `${name} ---年龄保密`;
  }
}
//和可选参数类似但又不太一样
console.log(getInfo2("张三"));
console.log(getInfo2("张三", 30));
1
2
3
4
5
6
7
8
9
10
11

剩余参数

//三点运算符 接受新参传过来的值

function sum(...result: number[]): number {
  var sum = 0;
  for (var i = 0; i < result.length; i++) {
    sum += result[i];
  }
  return sum;
}
alert(sum(1, 2, 3, 4, 5, 6));//21


function sum2(a:number,b:number,...result:number[]):number{    
    var sum=a+b;
    for(var i=0;i<result.length;i++){

        sum+=result[i];  
    }
    return sum;
}
alert(sum2(1,2,3,4,5,6)) ;//21其中a=1 b=2 result=3,4,5,6
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

函数重载

// java中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
// typescript中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
// ts为了兼容es5 以及 es6 重载的写法和java中有区别。

//es5中出现同名方法，下面的会替换上面的方法
function css(config) {}
function css(config, value) {}
// ts中的重载
 //重载签名
function getInfo(name: string): string;
//重载签名
function getInfo(age: number): string;
//具体实现
function getInfo(str: any): any {
  if (typeof str === "string") {
    return "我叫：" + str;
  } else {
    return "我的年龄是" + str;
  }
}
alert(getInfo("张三")); //正确
alert(getInfo(20)); //正确
alert(getInfo(true)); //错误写法

//参数个数不同的时候重载实现方法上可以加上可选参数
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;
  }
}
alert(getInfo("zhangsan")); /*正确*/
alert(getInfo(123));//错误，重载签名中没有只接受数字的签名
alert(getInfo("zhangsan", 20));
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
32
33
34
35
36
37

箭头函数 es6

//this指向的问题    箭头函数里面的this指向上下文
//普通js/ts写法
setTimeout(function () {
  alert("run");
}, 1000);
//升级为箭头函数
setTimeout(() => {
  alert("run");
}, 1000);

1
2
3
4
5
6
7
8
9
10