TypeScript核心语法（5）——函数

简介​

函数的类型声明，需要在声明函数时，给出参数的类型和返回值的类型。

function hello(a: string): void {
  console.log("hello " + txt);
}

上面示例中，函数hello()在声明时，需要给出参数a的类型（string），以及返回值的类型（void），后者写在参数列表的圆括号后面。void类型表示没有返回值，详见后文。

如果不指定参数类型（比如上例不写a的类型），TypeScript 就会推断参数类型，如果缺乏足够信息，就会推断该参数的类型为any。

返回值的类型通常可以不写，因为 TypeScript 自己会推断出来。

function hello(a: string) {
  console.log("hello " + a);
}

上面示例中，由于没有return语句，TypeScript 会推断出函数hello()没有返回值。

不过，有时候出于文档目的，或者为了防止不小心改掉返回值，还是会写返回值的类型。

如果变量被赋值为一个函数，变量的类型有两种写法。

// 写法一
const hello = function (a: string) {
  console.log("hello " + a);
};

// 写法二
const hello: (a: string) => void = function (a) {
  console.log("hello " + a);
};

上面示例中，变量hello被赋值为一个函数，它的类型有两种写法。写法一是通过等号右边的函数类型，推断出变量hello的类型；写法二则是使用箭头函数的形式，为变量hello指定类型，参数的类型写在箭头左侧，返回值的类型写在箭头右侧。

写法二有三个地方需要注意。

首先，函数的参数要放在圆括号里面，不放会报错。

其次，类型里面的参数名（本例是a）是必须的

再而，函数类型里面的参数名与实际参数名，可以不一致。

let f: (x: number) => number;

f = function (y: number) {
  return y;
};

上面示例中，函数类型里面的参数名为x，实际的函数定义里面，参数名为y，两者并不相同。

如果函数的类型定义很冗长，或者多个函数使用同一种类型，写法二用起来就很麻烦。因此，往往用type命令为函数类型定义一个别名，便于指定给其他变量。

type MyFunc = (txt: string) => void;

const hello: MyFunc = function (txt) {
  console.log("hello " + txt);
};

上面示例中，type命令为函数类型定义了一个别名MyFunc，后面使用就很方便，变量可以指定为这个类型。

函数的实际参数个数，可以少于类型指定的参数个数，但是不能多于，即 TypeScript 允许省略参数。

let myFunc: (a: number, b: number) => number;

myFunc = (a: number) => a; // 正确

myFunc = (a: number, b: number, c: number) => a + b + c; // 报错

上面示例中，变量myFunc的类型只能接受两个参数，如果被赋值为只有一个参数的函数，并不报错。但是，被赋值为有三个参数的函数，就会报错。

这是因为 JavaScript 函数在声明时往往有多余的参数，实际使用时可以只传入一部分参数。比如，数组的forEach()方法的参数是一个函数，该函数默认有三个参数(item, index, array) => void，实际上往往只使用第一个参数(item) => void。因此，TypeScript 允许函数传入的参数不足。

箭头函数

箭头函数是普通函数的一种简化写法，它的类型写法与普通函数类似。

const repeat = (str: string, times: number): string => str.repeat(times);

上面示例中，变量repeat被赋值为一个箭头函数，类型声明写在箭头函数的定义里面。其中，参数的类型写在参数名后面，返回值类型写在参数列表的圆括号后面。

可选参数​

如果函数的某个参数可以省略，则在参数名后面加问号表示。

function f(x?: number) {
  // ...
}

f(); // OK
f(10); // OK

上面示例中，参数x后面有问号，表示该参数可以省略。

函数体内部用到可选参数时，需要判断该参数是否为undefined。

let myFunc: (a: number, b?: number) => number;

myFunc = function (x, y) {
  if (y === undefined) {
    return x;
  }
  return x + y;
};

上面示例中，由于函数的第二个参数为可选参数，所以函数体内部需要判断一下，该参数是否为空。

void 类型​

void 类型表示函数没有返回值。

function f(): void {
  console.log("hello");
}

上面示例中，函数f没有返回值，类型就要写成void。

如果返回其他值，就会报错。

function f(): void {
  return 123; // 报错
}

上面示例中，函数f()的返回值类型是void，但是实际返回了一个数值，编译时就报错了。

void 类型允许返回undefined或null。

function f(): void {
  return undefined; // 正确
}

function f(): void {
  return null; // 正确
}