3、TS中的函数 - 《TypeScript》

一、TypeScript中的函数

一、TypeScript中的函数

函数的定义
可选参数
默认参数
剩余参数
函数重载
箭头函数 es6

1、函数的定义

注：es5 定义函数的方法
// 函数声明法
function run() {
    return 'run';
}
// 匿名函数
var run2 = function () {
    return 'run2';
}
注：ts中定义函数的方法
// 函数声明法
function run(): string {
    return 'run';
}
// 匿名函数
var fun2 = function (): number {
    return 123;
}
// ts中定义方法传参
function getInfo(name: string, age: number): string {
    return `${name} --- ${age}`;
}
alert(getInfo('zhangsan', 20));
// 没有返回值的方法
function run(): void {
    console.log('run')
}
run();

2、方法可选参数

es5里面方法的实参和行参可以不一样，但是ts中必须一样，如果不一样就需要配置可选参数

// age? 代表可传可不传
注意:可选参数必须配置到参数的最后面
function getInfo(name: string, age?: number): string {
  if (age) {
      return `${name} --- ${age}`;
  } else {
      return `${name} ---年龄保密`;
  }
}
alert(getInfo('zhangsan'))

3、默认参数

es5里面没法设置默认参数，es6和ts中都可以设置默认参数

function getInfo(name: string, age: number = 20): string {
  if (age) {
      return `${name} --- ${age}`;
  } else {
      return `${name} --- 年龄保密`;
  }
}
alert(getInfo('张三', 30));

4、剩余参数

// 三点运算符 接受新参传过来的值
function sum(...result: number[]): number {
    let sum = 0;
    for (let i = 0; i < result.length; i++) {
        sum += result[i];
    }
    return sum;
}
alert(sum(1, 2, 3, 4, 5, 6));
// 另一种写法，按顺序赋值
function sum(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(sum(1, 2, 3, 4, 5, 6));

5、ts函数重载

Java 中方法的重载：重载指的是两个或者两个以上同名函数，但它们的参数不一样，这时会出现函数重载的情况。
TypeScript 中的重载：通过为同一个函数提供多个函数类型定义来试下多种功能的目的。
ts为了兼容 es5 以及 es6 重载的写法和 java 中有区别。 ```typescript // 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)); // 输出：我的年龄是20


<a name="a5d05c1e"></a>
##### 6、es6箭头函数
- this指向的问题，箭头函数里面的this指向上下文
```typescript
// es5
setTimeout(function () {
    alert('run')
}, 1000)
// es6
setTimeout(() => {
    alert('run')
}, 1000)