TS 函数

函数基础

• 函数是JavaScript中的一等公民

  • 既函数就是一个对象，有对象的所有能力；
• javaScript 中有匿名函数和具名函数；

    // Named function 具名函数
    function add(x, y) {
        return x + y;
    }
    
    // Anonymous function 匿名函数
    let myAdd = function(x, y) { return x + y; };

• javaScript中，函数可以使用函数外变量

    let z = 100;

    function addToZ(x, y) {
        return x + y + z ;
    }

• this指向：

  • 箭头函数：定义时上下文中的this
  • 非箭头函数：使用时上下文中的this

TS中的函数类型

函数类型包括两个部分：参数类型和返回值类型

接口定义

    interface SearchFunc {
        (source: string, subString: string): boolean;
    }

    let mySearch: SearchFunc = function(source: string, subString: string) {
        return source.search(subString) !== -1;
    }

类型定义

• 完整的类型定义

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

• 常用的函数定义

  • 在使用时，就只在等号的一边带上类型，TS一样可以正确识别类型
  • 当参数已经给出类型的时候，TS可以根据返回语句自动判断类型，返回类型可以省略

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

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

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

参数类型

• 类型参数名与实际函数的参数名可以不一致，类型参数名只是为了提高可读性

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

必须参数

• 必须参数使用方法：(a:nubler) ,a就为可选参数

  • 输入多余的（或缺少）参数是不被允许的，如果一个参数可以不传，我们必须将其设定为可选参数；

可选参数 & 默认参数

• 可选参数使用方法：(a:nubler,b?:number) ,b就为可选参数

  • 可选参数后面不允许再出现必须参数；

• 默认参数使用方法：(a:number=12),a为可选参数

  • 默认参数会被识别为可选参数；
  • 默认参数后可以出现必须参数，但是用户使用的时候该位置必须明确的传入undefined来获取默认值

剩余参数

• 用法：(a:number,b:string,...rest:any[]),rest为剩余参数

  • 剩余参数必定为数组类型，具体时什么数组时用户来定义
  • 剩余参数必须为最后一个参数

    function push(array: any[], ...items: string[]) {
        items.forEach(function(item) {
            array.push(item);
        });
    }

this参数

this参数是一个假的参数，放在第一位，用来指定函数中this的类型

• 用法：(this:void)

重载

重载允许函数接受不同数量或者类型参数时，作出不同的处理

• 精确的定义放在最前面（类似switch）

    function reverse(x: number): number;
    function reverse(x: string): string;
    // function reverse(x: number | string): number | string 不是重载的一部分，这里是函数实现
    // 这里只有两个重载：一个是接收字符串另一个接收数字。 以其它参数调用reverse会产生错误
    function reverse(x: number | string): number | string {
        if (typeof x === 'number') {
            return Number(x.toString().split('').reverse().join(''));
        } else if (typeof x === 'string') {
            return x.split('').reverse().join('');
        }
    }