TypeScript学习- 函数

函数类型

类型定义

函数类型定义分为两部分：入参定义和出参定义。
按定义的时机分就近定义和前置定义两种。

// 就近定义
const add = (a:number, b:number) : number => a + b;

/**
 * 前置定义，即先定义接口，再赋给函数。
 * 推荐前置定义，复用性高
* */
interface Add {
  (a:number, b:number) : number;
}

// 只要入参和出参的类型以及个数与接口相符即可，参数名可以不一致
const add:Add = (x, y) => x + y;

类型推断

有些情况下，编译器会根据我们的代码上下文自动推断类型。

// 隐藏累出参类型，但编译器推断出函数返回值的类型是number
const add = (a:number, b:number) => a + b;

// 自动推断出a的类型是string
const a = '' + 1;

可选参数和默认参数

// b为可选参数
interface Add {
  (a:number, b?:number) : number;
}

const add:Add = (a, b) => {
  if (!b) {
    return 2 * a;
  }

  return a + b;
};
add(1);  // 2

// 为可选参数b设置一个默认值
const add:Add = (a, b = 2) => a + b;
add(1,1);  // 2
add(1);  // 3，在不传可选参时，是用来默认值

剩余参数

在es5，我们都可以通过arguments来访问函数的所有参数。
在es6和ts中我们可以剩余参数（rest参数）获得函数的不定长参。

// rest参数是一个数组，长度不定，且只能作为最后一个参数，参数名不一定非得叫rest
function calculate (a:number, ...rest_parameters:number[]) {
  const total = rest_parameters.reduce((sum, current) => sum += current);
  return a * total;
}
calculate(2, 1, 2)  // 6
calculate(3, 1, 2, 3)  // 18

this

传统function函数的this由执行上下文决定，指向最后调用它的一方。
箭头函数没有绑定this，而是在定义时通过作用域链向上查找，直到最近一层非箭头函数，若找不到则指向全局。

window.name = 'window';

function get_name () {
    const name = 'inside';
    return this.name;
}

// 在全局下调用，this指向window，严格模式下指向undefined
get_name();  // 'window'或报错

// 在全局下声明，this指向window，严格模式下指向undefined
const get_name2 = () => {
    const name = 'inside';
    return this.name;
}

get_name2();  // 'window'或报错

// 注意，外层是对象，而不是函数
const function_builder = {
  name: 'builder',
  get_name3: () => {
    const name = 'inside';
    console.log(this.name);
  }, 
};

get_name3();  // 'window'或报错

再看看另一个例子

window.name = 'window';

const function_builder = {
  name: 'builder',
  get_name() {
    const name = 'name1';
    return function () {
      return this.name;
    };
  }, 
  get_name2() {
    const name = 'name2';
    // 注意这里用的是箭头函数
    return () => this.name;
  },
};

// 注意，这里只是赋引用还没调用
const get_name_3 = function_builder.get_name2;
// 注意，这里执行了get_name2，并返回了一个箭头函数
const get_name_4 = function_builder.get_name2();

function_builder.get_name()();   // 'window'或报错
function_builder.get_name2()();  // 'builder'
get_name_3()();                  // 'window'或报错
get_name_4()                     // 'builder'

上面一个例子基本可以作为面试题了，有点绕，我们拆开来讲解下：

window.name = 'window';

const function_builder = {
  name: 'builder',
  get_name() {
    const name = 'name1';
    console.log(this.name);
    return function () {
      return this.name;
    };
  }, 
};

// 打印'builder' 并返回了一个非箭头函数，这说明get_name在调用时指向了function_builder
function_builder.get_name(); 

// 这句代码等价于它随后两句
function_builder.get_name()();

// 所返回的非箭头函数暴露在全局环境下
const get_name_fun = function_builder.get_name();
// 调用时指向了全局而非function_builder，故打印的不是'builder'
get_name_fun();

而箭头函数内包非箭头函数的例子：

window.name = 'window';

const function_builder = {
  name: 'builder',
  get_name2() {
    const name = 'name2';
    console.log(this.name);
    // 注意这里用的是箭头函数
    return () => this.name;
  },
};

// 与上例相同，get_name2指向了调用方function_builder，但不同的是返回的是箭头函数
function_builder.get_name2();

// 这句代码等价于它随后两句
function_builder.get_name2()();

// 此时get_name4被定义，通过作用域链查找，继承了最近一层非箭头函数get_name2的this
const get_name_4 = function_builder.get_name2();
// 和get_name2一样指向function_builder，故打印的是 'builder'
get_name_4();

// 赋引用
const get_name_3 = function_builder.get_name2;

// 在全局下调用，无论是get_name3还是所返回的函数都指向全局，故打出的不是'builder'
get_name_3()();

函数重载

ts通过为同一个函数提供多个函数类型定义来实现函数重载。

// 两次定义
function add(a:number, b:number) : number;
function add(a:number[], b: number[]) : number[];

// 一次实现
function add(a, b) { 
  if (typeof a === 'number') {
    return a + b;
  }

  if (a instanceof Array) { 
    return a.concat(b);
  }
};  

add(1, 2);  // 3
add([1], [2]);  // [1,2]