TypeScript学习【4】 函数类型

在 TypeScript 里，我们可以通过 function 字面量和箭头函数的形式定义函数，如下所示：

function add() {}
const add = () => {}

还可以显式指定函数参数和返回值的类型，如下所示：

const add = (a: number, b: number): number => {
  return a + b;
}

如上述示例中，参数名后的 :number 表示参数类型都是数字类型，圆括号后的 : number则表示返回值类型也是数字类型。下面介绍一下返回值类型和参数类型

返回值类型

在 JavaScript 中，如果一个函数可以没有显式 return，此时函数的返回值是 undefined：

function func() {
  ......
}
console.log(func()); // undefined

需要注意的是，在 TypeScript 中，如果我们显式声明函数的返回值类型为 undfined，会报错：

function fn(): undefined { 
// error TS2355: A function whose declared type is neither 'void' nor 'any' must return a value.
 ......
}

此时，正确的做法是使用void 类型来表示函数没有返回值的类型（void 类型很少用到，这基本是唯一有用的场景），示例如下：

function func(): void {
  ......
}
func().someFunc(); // error TS2339: Property 'someFunc' does not exist on type 'void'.

我们可以使用类似定义箭头函数的语法来表示函数类型的参数和返回值类型，此时 => 仅仅用来定义一个函数类型而不是实现这个函数。

需要注意的是，这里的 =>与 ES6 中箭头函数的 => 有所不同。TypeScript 函数类型中的 => 用来表示函数的定义，其左侧是函数的参数类型，右侧是函数的返回值类型；而 ES6 中的 => 是函数的实现。

如下示例中，先定义了一个函数类型（这里使用了类型别名 type），并且使用箭头函数实现了这个类型：

type Adder = (a: number, b: number) => number; // TypeScript 函数类型定义
const add: Adder = (a, b) => a + b; // ES6 箭头函数

在对象中，除了使用这种声明语法，我们还可以使用类似对象属性的简写语法来声明函数类型的属性，如下代码所示：

interface Entity {
  add: (a: number, b: number) => number;
  del(a: number, b: number): number;
}
const entity: Entity = {
  add: (a, b) => a + b,
  del(a, b) {
    return a - b
  }
};

在某种意义上来说，这两种形式都是等价的。但是很多时候，我们不必或者不能显式地指明返回值的类型，这就涉及可缺省和可推断的返回值类型

可缺省和可推断的返回值类型

函数返回值的类型可以在 TypeScript 中被推断出来，即可缺省

函数内是一个相对独立的上下文环境，我们可以根据入参对值加工计算，并返回新的值。从类型层面看，我们也可以通过类型推断加工计算入参的类型，并返回新的类型，如下所示：

function func(one: string, two: number) {
  const nums = [two];
  const strs = [one];
  return {
    nums,
    strs
  } // 返回 nums: number[]; strs: string[] 的类型
}

参数类型

了解了定义函数的基本语法以及返回值类型后，再来详细看一下可选参数、默认参数、剩余参数的几个特性。

可选参数和默认参数

在实际工作中，我们可能经常碰到函数参数可传可不传的情况，当然 TypeScript 也支持这种函数类型表达，如下代码所示：

function func(x?: string) {
  return x;
}
func(); // undefined
func('777'); // 777

在上述代码中，我们在类型标注的 : 前添加 ? 表示 func 函数的参数 x 是可缺省的

也就是说参数 x 的类型可能是 undefined（不传入实参）类型或者是 string 类型（传入 ‘777’ 实参），那是不是意味着可缺省和类型是 undefined 等价呢？

function func1(x?: string) {
  console.log(x);
}
function func2(x: string | undefined) {
  console.log(x);
}
func1(); // undefined
func1(undefined); // undefined
func2(); // error TS2554: Expected 1 arguments, but got 0.
func2(undefined); // undefined

这里的 ?: 表示参数可以缺省、可以不传，也就是说调用函数时，我们可以不显式传入参数。但是，如果我们声明了参数类型为 xxx | undefined，就表示函数参数是不可缺省且类型必须是 xxx 或者 undfined

因此，在上述代码中，func2 函数如果不显示传入函数的参数，TypeScript 就会报一个 ts(2554) 的错误，即函数需要 1 个参数，但是我们只传入了 0 个参数。

在 ES6 中支持函数默认参数的功能，而 TypeScript 会根据函数的默认参数的类型来推断函数参数的类型，示例如下：

function func(x = '777') {
  console.log(x);
}
func(); // 777
func('hello world') // hello world
func(1); // error TS2345: Argument of type '1' is not assignable to parameter of type 'string | undefined'.

在上述示例中，根据函数的默认参数 ‘777’ ，TypeScript 推断出了 x 的类型为 string | undefined

剩余参数

在 ES6 中，JavaScript 支持函数参数的剩余参数，它可以把多个参数收集到一个变量中。同样，在TypeScript 中也支持这样的参数类型定义，如下代码所示：

function sum(...nums: number[]) {
  return nums.reduce((a, b) => a + b, 0);
}
sum(1, 2); // 3
sum(1, 2, 3); // 6
sum(1, '2'); // error TS2345: Argument of type 'string' is not assignable to parameter of type 'number'.

在上述代码中，sum 是一个求和的函数，...nums 将函数的所有参数收集到了变量 nums 中，而 nums 的类型应该是 number[]，表示所有被求和的参数是数字类型。因此，sum(1, ‘2’) 抛出了一个 ts(2345) 的错误，因为参数 ‘2’ 并不是 number 类型。

如果这么写就可以：

function sum(...nums: (number | string)[]): number {
  return nums.reduce<number>((a, b) => a + Number(b), 0);
}
sum(1, '2'); // 3

函数的每一个参数的类型就是联合类型 number | string，因此 sum(1, ‘2’, 3) 的类型检查也就通过了。

this

众所周知，在 JavaScript 中，函数 this 的指向一直是一个令人头痛的问题。因为 this 的值需要等到函数被调用时才能被确定，更别说通过一些方法还可以改变 this 的指向。也就是说 this 的类型不固定，它取决于执行时的上下文。

但是，使用了 TypeScript 后，我们就不用担心这个问题了。通过指定 this 的类型（严格模式下，必须显式指定 this 的类型），当我们错误使用了 this，TypeScript 就会提示我们，如下代码所示：

function func() {
 console.log(this.name); // error TS2683: 'this' implicitly has type 'any' because it does not have a type annotation.
}
func();

在上述代码中，如果我们直接调用 say 函数，this 应该指向全局 window 或 global（Node 中）。但是，在 strict 模式下的 TypeScript 中，它会提示 this 的类型是 any，此时就需要我们手动显式指定类型了。

在 TypeScript 中，我们只需要在函数的第一个参数中声明 this 指代的对象（即函数被调用的方式）即可，比如最简单的作为对象的方法的 this 指向，如下代码所示：

function func(this: Window, name: string) {
  console.log(this.name);
}
window.func = func;
window.func('hello');
const obj = {
  func
};
obj.func('hello'); // error TS2684: The 'this' context of type '{ func: (this: Window, name: string) => void; }' is not assignable to method's 'this' of type 'Window'.

在上述代码中，我们在 window 对象上增加 say 的属性为函数 say。那么调用 window.say() 时，this 指向即为 window 对象。

调用 obj.say() 后，此时 TypeScript 检测到 this 的指向不是 window，于是抛出了如下所示的一个 ts(2684) 错误。

需要注意的是，如果我们直接调用 func()，this 实际上应该指向全局变量 window，但是因为 TypeScript 无法确定 func 函数被谁调用，所以将 this 的指向默认为 void，也就提示了一个 ts(2684) 错误。 如下所示：

func('777'); // error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Window'.

此时，我们可以通过调用 window.say() 来避免这个错误，这也是一个安全的设计。因为在 JavaScript 的严格模式下，全局作用域函数中 this 的指向是 undefined。

同样，定义对象的函数属性时，只要实际调用中 this 的指向与指定的 this 指向不同，TypeScript 就能发现 this 指向的错误，示例代码如下：

interface Person {
  name: string;
  say(this: Person): void;
}
const person: Person = {
  name: 'Jae',
  say() {
    console.log(this.name);
  }
};
const func = person.say;
func(); // error TS2684: The 'this' context of type 'void' is not assignable to method's 'this' of type 'Person'.

函数重载

JavaScript 是一门动态语言，针对同一个函数，它可以有多种不同类型的参数与返回值，这就是函数的多态。

而在 TypeScript 中，也可以相应地表达不同类型的参数和返回值的函数，如下所示：

function convert(x: string | number | null): string | number | -1 {
  if (typeof x === 'string') {
    return Number(x);
  }
  if (typeof x === 'number') {
    return String(x);
  }
  return -1;
}
const x1 = convert('1'); // => string | number
const x2 = convert(1); // => string | number
const x3 = convert(null); // => string | number

在上述代码中，我们把 convert 函数的 string 类型的值转换为 number 类型，number 类型转换为 string 类型，而将 null 类型转换为数字 -1。此时， x1、x2、x3 的返回值类型都会被推断成 string | number

那么，有没有一种办法可以更精确地描述参数与返回值类型约束关系的函数类型呢？有，这就是函数重载。如下示例中先定义了三种各不相同的函数类型列表，并描述了不同的参数类型对应不同的返回值类型，而后才是函数的实现：

function convert(x: string): number;
function convert(x: number): string;
function convert(x: null): -1;
function convert(x: string | number | null): any {
  if (typeof x === 'string') {
      return Number(x);
  }
  if (typeof x === 'number') {
      return String(x);
  }
  return -1;
}
const x1 = convert('1'); // => number
const x2 = convert(1); // => string
const x3 = convert(null); // -1

类型谓词（is）

在 TypeScript 中，函数还支持另外一种特殊的类型描述，如下示例 ：

function isString(s: unknown): s is string {
  return typeof s === 'string';
}
function isNumber(n: number) {
  return typeof n === 'number';
}
function func(x: unknown) {
  if (isString(x)) {...} // 没问题
  if (isNumber(x)) {...} // error TS2345: Argument of type 'unknown' is not assignable to parameter of type 'number'.
}

在上述代码中，在添加返回值类型的地方，通过“参数名 + is + 类型”的格式明确表明了参数的类型，进而引起类型缩小，所以类型谓词函数的一个重要的应用场景是实现自定义类型守卫