接口中使用函数

接口可以描述函数类型；为了使用接口表示函数类型，我们需要给接口定义一个调用签名。它就像是一个只有参数列表和返回值类型的函数定义。参数列表里面的每个参数都需要名称和类型。

一、为函数定义类型

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

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

二、可选参数和默认参数

传递给一个函数的参数个数必须与函数期望的参数个数一致。

function buildName(firstName: string, lastName: string) {
    return firstName + " " + lastName;
}
​
let result1 = buildName("Bob");                  // error, too few parameters
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");         // ah, just right

不过，在TypeScript里我们可以在参数名旁使用 ?实现可选参数的功能。毫无疑问，可选参数必须跟在必选参数后面，捋一捋就明白了。

function buildName(firstName: string, lastName?: string) {
    if (lastName)
        return firstName + " " + lastName;
    else
        return firstName;
}
​
let result1 = buildName("Bob");  // works correctly now
let result2 = buildName("Bob", "Adams", "Sr.");  // error, too many parameters
let result3 = buildName("Bob", "Adams");  // ah, just right

当然，还可以给参数设置默认值，在所有必选参数后面带默认值的参数都是可选的，与可选参数一样，在调用函数的时候可以省略。

ps:带默认值的参数不需要放在必选参数的后面。 如果带默认值的参数出现在必须参数前面，用户必须明确的传入 undefined值从而来获得默认值。

三、剩余参数

在js里面叫rest参数 ...restArr

function buildName(firstName: string, ...restOfName: string[]) {
  return firstName + " " + restOfName.join(" ");
}
​
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");

四、函数类型变量

1. 变量的类型可以声明为函数类型;

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

    

2. 函数类型属于自定义类型，包含两部分：参数类型和返回值类型；

   //声明一个变量并指定类型为自定义的函数类型
   let myadd:(x:number, y:number)=>number;
   //声明一个函数
   function add(x: number, y: number): number {
       return x + y;
   }
   //把函数赋值给类型为函数类型的变量
   myadd = add;
   ​
   //赋值匿名函数
   myadd =  function(x: number, y: number): number {
       return x + y;
   }
   //赋值箭头函数
   myadd =  (x: number, y: number):number=>{
       return x + y;
   }

    

3. 只要参数类型是匹配的，那么就认为它是有效的函数类型，并不要求参数名一样，很多时候参数名是为了增加可读性

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

    

4. 在函数和返回值类型之前使用( =>)符号，返回值类型是函数类型的必要部分，如果函数没有返回任何值，你也必须指定返回值类型为 void而不能留空。

五、使用接口封装函数变量类型

自定函数类型代码往往很长，可以使用接口来封装该类型，之后使用接口来代表该类型

//函数类型接口
interface addType {
    (baseVaule:number, increValue:number):number
}
function add(x: number, y: number): number {
    return x + y;
}
let myadd1:addType = add;
let myadd2:addType = (x:number, y:number):number=>{
    return x+y;
}