TypeScript学习之函数

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第16天，点击查看活动详情

简介

在 JavaScript 中，函数是构建应用的一块基石，我们可以使用函数抽离可复用的逻辑、抽象模型、封装过程。在TypeScript中，函数仍然是最基本、最重要的概念之一。下面就来看看TypeScript中的函数都有哪些特性。

函数定义

直接定义

直接定义这种方式是最好理解的。

function fun_1(num1: number, num2: number): number {
  return num1 + num2;
}

const fun_2 = (num1: number, str1: string): string => {
  return num1 + str1;
};

function fun_3(): void {
  console.log("fun_3");
}
复制代码

通过表达式定义

const fun_4: (num1: number, str1: string) => string = (num1: number, str1: string) => {
  return num1 + str1;
};
复制代码

通过类型别名定义

我们还可以把函数表达式定义成类型别名。

type fun5Type = (num1: number, str1: string) => string

const fun_5: fun5Type = (num1: number, str1: string) => {
  return num1 + str1;
};
复制代码

函数参数

函数参数这块在ES中都有与之对应的特性，基本上差不多。

可选参数

type Add = (x: number, y: number, z?: number) => number;

let add: Add = (arg1, arg2, arg3) => arg1 + arg2 + arg3;

add(1, 2); // success   3
add(1, 2, 3); // success   6
复制代码

在JavaScript中，上面代码中后面两个函数调用都不会报错, 只不过add(1, 2, 3)可以返回正确结果3，add(1)会返回NaN。而在TypeScript中我们设置了指定的参数，那么在使用该类型时，传入的参数必须与定义的参数类型和数量一致。

但有时候，函数有些参数不是必须的，我们就可以将函数的参数设置为可选参数。可选参数只需在参数名后跟随一个?即可，这就是可选参数。

需要注意，可选参数必须放在必选参数后面，这和在 JS 中定义函数是一致的。来看例子：

type Add2 = (x?: number, y: number) => number;  // error 必选参数不能位于可选参

// 需要改成
type Add2 = (y: number, x?: number) => number;
复制代码

默认参数

当为参数指定了默认参数时，TypeScript 会识别默认参数的类型；当调用函数时，如果给这个带默认值的参数传了别的类型的参数则会报错：

const add = (x: number, y = 2) => {
  return x + y;
};
add(1, "ts"); // error 类型"string"的参数不能赋给类型"number"的参数
复制代码

当然也可以显式地给默认参数 y 设置类型：

const add = (x: number, y: number = 2) => {
  return x + y;
};
复制代码

默认参数不比可选参数，默认参数可以放在参数列表的任意位置。

const add = (x: number = 2, y: number) => {
  return x + y;
};
复制代码

当默认参数不在参数列表的第一个的时候我们该怎么使用呢？

// 使用undefined占位就可以啦
add(undefined, 10) // 12
复制代码

剩余参数

剩余参数与JavaScript中的语法类似，需要用 ... 来表示剩余参数。

const add = (a: number, ...rest: number[]) => rest.reduce(((a, b) => a + b), a)
复制代码

上面的例子参数 rest 则是一个由number组成的数组，在本函数中用 reduce 进行了累加求和。

函数重载

学过java的通过肯定知道函数的重载和重写。那么在 TypeScript 中它是怎么定义的呢？

interface Direction {
  top: number;
  bottom?: number;
  left?: number;
  right?: number;
}

// 参数列表可能的情况 1个参数 2个参数 4个参数
function assigned(all: number): Direction;
function assigned(topAndBottom: number, leftAndRight: number): Direction;
function assigned(
  top: number,
  right: number,
  bottom: number,
  left: number
): Direction;

// 方法完整的实现
function assigned(a: number, b?: number, c?: number, d?: number) {
  if (b === undefined && c === undefined && d === undefined) {
    b = c = d = a;
  } else if (c === undefined && d === undefined) {
    c = a;
    d = b;
  }
  return {
    top: a,
    right: b,
    bottom: c,
    left: d,
  };
}

assigned(1);
assigned(1, 2);
assigned(1, 2, 3); // 没有定义三个参数的函数，编译阶段直接报错
assigned(1, 2, 3, 4);
复制代码

最后我们分别传入不同数量的参数，发现只有三个参数的情况下报错了.

相较于JS，函数重载可以让我们在编写代码阶段就能及时发现错误。很大的提升了我们的开发效率。

系列文章

TypeScript学习之环境搭建

TypeScript学习之数据类型

后记

感谢小伙伴们的耐心观看，本文为笔者个人学习笔记，如有谬误，还请告知，万分感谢！如果本文对你有所帮助，还请点个关注点个赞~，您的支持是笔者不断更新的动力！