TypeScript-入门教程(5)

函数类型

函数是 JavaScript 中的一等公民

1.函数声明

JavaScript中两种常见的定义函数的方式：函数声明和函数表达

// 函数声明（Function Declaration）
function sum(x, y) {
    return x + y;
}

// 函数表达式（Function Expression）
let mySum = function (x, y) {
    return x + y;
};

在TypeScript中函数如果有输入和输出，那么则要对其输入和输出的值进行约束，函数声明定义的较为简单：

function sum(x:number,y:number):number{
   return x+y;
}

其中我们限制了传入的x,y的参数必须为Number类型的数值，同时我们返回值的类型也必须是Number类型。 注意：输入多余的（或者少于要求的）参数，是不被允许的

2.函数表达式

如果我们用函数表达式定义一个函数，可能是这样的：

let mySum=function(x:number,y:number):number{
  return x+y;
}

这是可以通过编译的，不过事实上，我们只是给等号右边的匿名函数进行了类型定义，而等号左边的 mySum，是通过赋值操作进行类型推论而推断出来的。所以应该修改为这样：

let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

注意不要混淆了 TypeScript 中的 => 和 ES6 中的 =>。

在 TypeScript 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。

在 ES6 中，=> 叫做箭头函数，应用十分广泛.

3.用接口定义函数的形状

我们也可以使用接口的方式来定义一个函数需要符合的形状：

interface SearchFunc {
    (s1: string, s2: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(s1: string, s2: string) {
    return s1.search(s2) !== -1;

接口SearchFunc中定义了参数的类型以及返回值的类型。

4.可选参数

我们指导参数多传或者是少传都是不被允许的，那么我们就可以设置可选参数，用?来表示：

function getName(n1:string,n2?:string):string{
   if(n2){
      return n1+n2;
    }else{
       return n1;
    }
}
getName("Tom","Jack"); //TomJack
getName(undefined,"James") //James

注意：可选参数必须是在必须参数的后面，换句话说，可选参数后面不允许再出现必需参数了

function getName(n1?:string,n2:string):string{
   if(n1){
      return n1+n2;
    }else{
       return n2;
    }
}
getName("Tom","Jack"); //TomJack
getName(undefined,"James") //error

5.参数默认值

在 ES6 中，我们允许给函数的参数添加默认值，TypeScript 会将添加了默认值的参数识别为可选参数：

function setName(n1:string,n2:string="Harden"):string{
     return n1+n2;
}
setName("Kobe","Bryant")// KobeBryant
setName(undefined,"James") // JamesHarden

此时就不受可选参数必须接在必需参数后面的限制了：

function setName(n1:string="Paul",n2:string):string{
     return n1+n2;
}
setName("Lerbon","James")// LerbonJames
setName(undefined,"James") // PaulJames