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

前言

在JavaScript中，函数可以帮助我们实现模块、类封装，我们一般会通过函数来封装我们的通用功能，但是我们再调用时没有很好的类型检查，typescript对其也做了支持。

普通函数和匿名函数

在JavaScript中，我们创建的函数有带名字和不带名字的函数

// 具名函数
function add(x, y) {
  return x + y;
}

// 匿名函数
const myAdd = function (x, y) {
  return x + y;
};

目前我们没有添加类型检查，在调用的时候就无法获得比较好的类型提示：

• 入参均为any，无法知晓具体类型

• 传入了数字类型，但是返回值类型还是无法确定

那么我们如何对其做类型类型检查呢？

函数类型

我们给刚才的两个函数添加函数类型检查：入参和返回值

// 具名函数
function add(x: number, y: number): number {
  return x + y;
}

// 匿名函数
const myAdd = function (x: number, y: number): number {
  return x + y;
};
const sum = myAdd(2, 5);

我们给每一个入参和返回值都添加了类型。我们可以很好地知晓这个函数的类型 typescript能够根据return语句自动推断返回值类型，一般我们省略返回值类型的声明。

完整函数类型声明

如果我们想声明完整的函数类型，应该是这样子的。 我们给匿名函数声明完整的函数类型，直接在变量上做声明，

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

(x: number, y: number) => number这一部分就是完整的函数声明，函数类型包含两部分：参数类型和返回值类型，我们的参数类型名字和实际的参数名字可以不一样，通过箭头函数使声明更加清晰。

const myAdd: (num1: number, num2: number) => number = function (x: number, y: number) {
  return x + y;
};

总结

我们对在typescript做了一个简单的介绍，但是函数中的一些es6中语法的参数如何处理呢？比如可选、默认值、剩余参数这些，我们再下一节再做介绍。