TS基础——为函数声明类型

TS中定义函数类型

• 写在之前

  • TS对JS函数的修改是，为JS函数增加了强类型语言（C++等）函数的用法。

• 如何定义一个函数类型

  • 基础用法

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

    上面的例子中，规定了函数add的第一个参数类型必须是number，第二个参数的类型必须是number，以及函数的返回值的类型必须是number。

    我们也可以不定义函数的返回值类型，因为TS类型检查系统会对返回值进行类型推断。

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

    上面的例子中就没有为函数的返回值规定类型，但是TS类型检查会帮我们完成。

  • 为剪头函数定义类型

    const add = (x: number,y: number): number => {
      return x + y;
    } 
    

  • 当没有提供函数实现时，对函数类型进行声明的方法

    interface addFunc{
      (x: number,y: number): number;
    }
    interface obj{
      add?: (x: number,y: number) => number;
    }
    

    上面的例子中给出了2种直接为函数类型提供声明的方法，注意这里我们利用了interface，interface是可以用于约束引用类型和类的类型的。

    const secondAdd: addFunc
    secondAdd = function(x,y){
      return x + y;
    }
    

    因为上面我们已经对函数类型进行了规定，这样我们在写函数实现的时候就不需要再进行类型规定。

• 可选参数

  • 尽管我们在上面定义了函数形参每个参数的类型，但是为了实现函数重载，我们还可以引入可选参数（函数重载在C++中是指，声明多个功能相似的同名函数，但是这些同名函数的形参（个数、顺序、类型）中至少一个必须不同）。

    function times(x: number,y?: number){
      if(y){
        return x* y;
      }
      return x;
    }
    

    在上面的例子中，我们定义了可选参数，这样就既可以传入一个参数，也可以传入2个参数。同时传入不同个数参数时，执行逻辑不同，这样就实现了利用参数个数不同的函数重载。

• 剩余参数

  • ES6中提出了剩余参数的概念，TS在这个的基础上加了类型校验。

    function add(x: number, ...restNums: number[]){
      let res = x;
      for(let i = 0;i < restNums.length;i++)
      {
        res = res + restNums[i];
      }
      return res;
    }
    add(1,2,3) // 6
    add(1,2,3,4,5) //15