TypeScript基础入门介绍（三）之函数篇

介绍

函数是JavaScript应用程序的基础。 函数实现了抽象层，模拟类，信息隐藏和模块。 在TypeScript里，虽然已经支持类，命名空间和模块，但函数仍然是主要的定义 行为的地方。 TypeScript为JavaScript函数添加了额外的功能，让我们可以更容易地使用。

在JavaScript中，我们通常这样定义函数：

//  命名函数
function add(x, y) {
    return x+y;
}
//  匿名函数
var add = function(x,y) { return x+y;  }

typeScript中的函数

函数的定义

我们可以为函数的参数添加类型，再为函数本身添加返回值类型。ts能够根据返回语句自动推断出返回类型，因此我们常常省略它。

function add(x:number, y:number):number {
    return x+y;
}
var add = function(x:number, y:number):number { return x+y; }

可选参数和默认参数

ts中每个函数的参数都是必须得，但这并不代表参数不能是null或undefined，而是指编译器会检查用户是否为每个参数都传入了值。也就是说，传递给一个函数的参数个数必须与函数期望的参数个数一致。

function fullName(firstName:string, lastName:string) {
    return firstName+lastName;
}
let a = fullName('bob');   //  error  少一个参数
let b = fullName('bob', 'tom', 'mary');  //  error  多一个参数
let c = fullName('bob', 'tom');   //  right

JavaScript里，每个参数都是可选的，可传可不传。 没传参的时候，它的值就是undefined。 在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。 比如，我们想让lastName是可选的：

function fullName(firstName:string, lastName?:string) {
    if(lastName) {
        return firstName+lastName;
    }else {
        return firstName;
    }
}
let a = fullName('bob');   //  right now
let b = fullName('bob', 'tom', 'mary');  //  error  多一个参数
let c = fullName('bob', 'tom');   //  right

可选参数必须跟在必须参数后面。 如果上例我们想让firstName是可选的，那么就必须调整它们的位置，把firstName放在后面。

在ts中，我们也可以为参数提供一个默认值，当用户没有传入这个参数或传入undefined时，他们就是有默认初始值的参数。我们修改上面的例子lastName默认为tom；

function fullName(firstName:string, lastName='tom') {
    return firstName+'  ' +lastName;
}
let a = fullName('bob');   //  bob tom
let b = fullName('bob', 'tom', 'mary');  //  error  多一个参数
let c = fullName('bob', undefined);   //  bob tom
let d = fullName('bob', 'mary');  //  bob mary

剩余参数

必要参数，默认参数和可选参数有个共同点：它们表示某一个参数。 有时，你想同时操作多个参数，或者你并不知道会有多少参数传递进来。 在JavaScript里，你可以使用 arguments来访问所有传入的参数。ES6中使用三点运算符来接受参数传递过来的值。如下例：计算多个参数的和

//  JS的写法
function sum(a,b,c,d) {
    return a+b+c+d;
}
//  ts引入三点运算的写法
function sum(a:number, ...b:number[]):number{
  var sum = 0;
  for(var i = 0; i < b.length; i++){
      sum+=b[i];
    }
    return sum;
}
//  按照js中我们只能计算4个以上参数的和，而下面ts的写法可求任意个参数的和

剩余参数会被当做个数不限的可选参数。 可以一个都没有，同样也可以有任意个。

函数重载

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

es5中出现同名的函数，下面的会替换上面的函数

function css(config){}
function css(config,value){}

ts中的重载

// 例1
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));    //错误写法

//  例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;
   }
}
alert(getInfo('zhangsan'));  /*正确*/
alert(getInfo(123));  错误
alert(getInfo('zhangsan',20));

getInfo函数根据传入参数的不同类型，执行不同的函数。
上一篇TypeScript基础入门（二）主要介绍ts的基本数据类型
下一篇TypeScript基础入门（四）主要介绍ts的类与接口