你能读得懂的TypeScript教程之函数

函数同样是TypeScript的基础之一。通过函数你可以将重合的功能代码块进行封装，然后在你需要它的时候调用即可。换句话说函数就是具有某一功能的代码块，它的使命是将你臃肿的代码变的更加苗条。

首先，咱们先来回顾一下之前在JS中是如何创建函数以及实现调用的： 1、函数声明:

function fn (a,b){
   return
   a + b;
}

2、函数表达式:

let fn = function(a,b) {   
   return
   a + b;
}

3、箭头函数:

var fn = (a,b) => a + b;
  // 函数调用 
  console.log(fn(1,2))

注：以上创建函数的方式在TypeScript中也是支持的。

一、TypeScript中的函数是有类型的

函数的类型分为参数类型与返回值类型。

1、参数类型：通过在参数后加冒号指定参数类型

函数声明：

function fn (a:number,b:number){    
  return
  a + b;
}

函数表达式：

var fn = function(a:number,b:number) {   
  return
  a + b;
}

箭头函数:

let fn = (a:number,b:number) => a + b;

注意：只有参数类型是匹配的，那么该参数才是有效的。

fn(1,2);
// 正确
// A function whose declared type is neither 'void' nor 'any' must return a value.
fn("1",true);
// error

如果参数类型不确定，可以将类型设置为 any：

let fn = (a:any,b:any) => a + b;
fn("1",true);

2、返回值类型：顾名思义，用于指定返回值的类型。写法依然是通过冒号指定返回类型。

函数声明：

function fn (a:number,b:number) : number {  
  return
  a + b;
}

函数表达式：

let fn = function(a:number,b:number) : number  {    
  return
  a + b;
}

箭头函数：

var fn = (a:number,b:number) :number => a + b;

返回的类型一定要与你指定的类型匹配，否则编译是不会通过的，如：

// Type 'string' is not assignable to type 'number'.

var fn = (a:number,b:number) :number => a + b + "1";

如果没有返回值，需要指定类型为void:

var fn = function(a:number,b:number) : void{
    console.log(a + b);
}

如果你指定了返回类型为void，却偏偏要返回值，那是在找死，一样不会编译通过，如：

//'number' is not assignable to type 'void'.

var fn = function(a:number,b:number) : void{   
  return
  a + b;
}

自然，你指定了非void类型，却没有返回值，依然是在找死：

// A function whose declared type is neither 'void' nor 'any' must return a value.

var fn = function(a:number,b:number) : number{
    console.log(a + b);
}

二、完整函数类型

注意：Typescript具有类型推断机制，也就是说如果我们不指定变量的类型，ts会自行对该值的类型进行推断。例如以下代码会自行推断为string类型：

let  siteName = "http://www.zhangpeiyue.com";
console.log(typeof siteName);// string

在之前的例子当中，通过表达式与箭头函数创建的函数是可以通过编译的。我们也只是对等号右侧的匿名函数进行了类型定义。而等号左边的 fn并没有添加类型，其类型是通过赋值操作自行推断出来的。完整写法：在函数和返回值类型之间使用( =>)符号，

let fn: (a: number, b: number) => number =   
   function (a: number, b: number): number {     
      return
      a + b;
   };

只要参数类型是匹配的，便是有效的函数类型，与参数名称是否对应无关，以下也是正确的：

let fn: (num1: number, num2: number) => number =   
  function(a: number, b): number {       
      return
       a + b;
  };

三、函数参数都是必须的

在JavaScript中，传递的参数是可选的，可传可不传，当我们没有传参的时候，它的值是undefined。但是在TypeScript中我们传递给一个函数的参数个数必须与函数接收的参数个数一致，类型也需要一致。

function fullName(firstName: string, lastName: string) {    
    return
    firstName + lastName;
}

// 张三
console.log(fullName("张","三"));
// 传递类型不同：error Argument of type '3' is not assignable to parameter of type 'string'.

console.log(fullName("张",3));
// 传递个数少1：error Expected 2 arguments, but got 1.
console.log(fullName("王"));

//传递个数多1：error Expected 2 arguments, but got 3.

console.log(fullName("阮","小","二"));

四、可选参数

在上面的示例当中，我们知道传递的参数个数需要与函数接收的个数一致。那么有没有办法实现参数的可先呢？当然有！我们只需要在参数旁添加一个 ？即可。比如，我们让last name是可选的：

function
 fullName(firstName: string, lastName?: string) {   
   return
   firstName + lastName;
}

// 张三
console.log(fullName("张","三"));

// 王undefined
console.log(fullName("王"));

//error Expected 1-2 arguments, but got 3.
console.log(fullName("阮","小","二"));

五、默认参数

通过上例可知，当可选参数未传递时，默认值为 undefined。如果我们想要指定默认值的话，添加 =即可

function fullName(firstName: string, lastName: string= "六") {
  return
  firstName + lastName;
}

// 张三
console.log(fullName("张","三"));

// 王六
console.log(fullName("王"));

//error Expected 1-2 arguments, but got 3.
console.log(fullName("阮","小","二"));

六、剩余参数

如果我们不知道有多少参数传递进来怎么办呢？在JS中我们可以通过arguments来接收，而在TS中我们可以通过...(三个小数点)来将剩余的参数放到一个数组中。比如

function fullName(firstName: string, ...lastName: string[]) {
   return
   firstName + lastName.join("");
}

// 张三
console.log(fullName("张","三"));

// 王六
console.log(fullName("王"));

// 阮小二
console.log(fullName("阮","小","二"));

七、方法重载（Overload）

函数重载是指同一个函数，根据传递的参数不同，会有不同的表现形式。注意在JS当中是不支持重载的。在TS中是提供了重载功能的，但是这个重载功能和C#或者java等语言的重载相比是不完整的。

TypeScript的函数重载共用一个函数体，也就是说无论声明多少个同名的函数，它们共同使用同一个函数体，在调用时会根据传递参数类型的不同，而执行这一个函数体。例如：

function fn(name: string): string;

function fn(age: number): number;

function fn(nameorage: any): any {  
 if (typeof nameorage == "string") {      
   return
   "姓名:" + nameorage;
 } else if(typeof nameorage == "number") {       
   return "年龄:"+ nameorage
    }
}

// 姓名:阮小二
console.log(fn("阮小二"));

// 年龄:18
console.log(fn(18));

共用的函数体：

if(typeof nameorage == "string") { 
   return "姓名:" + nameorage;
} else if(typeof nameorage == "number") {  
  return "年龄:"+ nameorage
}

编译之后的JS:

function fn(nameorage) {   
  if(typeof nameorage == "string") {       
     return "姓名:" + nameorage;
  } else if (typeof nameorage == "number") {        
     return "年龄:" + nameorage;
  }
}
console.log(fn("阮小二"));
console.log(fn(18));