Typescript快速认清函数类型定义结构，函数类型声明与箭头函数的区别

树莓雪糕

已于 2022-01-25 11:13:39 修改

阅读量877

点赞数 2

CC 4.0 BY-SA版权

分类专栏：前端基础文章标签： typescript javascript 前端

于 2022-01-19 00:23:22 首次发布

本文链接：https://blog.csdn.net/sumaliqinghua/article/details/122571265

前端基础专栏收录该内容

1 篇文章

订阅专栏

本文详细解析了箭头函数与函数表达式的区别，包括定义方式、类型声明及使用场景，帮助初学者快速掌握这两者的不同之处。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新人学习的时候常常难以分辨箭头函数和箭头声明的区别，以下做详细阐释，以求以后一眼就能认出二者的差别。

首先来看普通函数的定义


function (x: number, y: number): void {
    console.log("object");
}
function 函数名(参数): 返回值类型

然后是函数表达式的定义，及其变种

完整版：
const add: (x: number, y: number) => void//函数类型
= (x: number, y: number): void => {//函数定义
  console.log("object");
};

省略及变形：
const add: (x: number, y: number) => number = (x, y) => {
    console.log('object');
    return x + y;
}
const add: (x: number, y: number) => number = (x, y):number => {
    console.log('object');
    return x + y;
}
const add = (x, y) => {
    console.log('object');
    return x + y;
}

//function形式
const add = function(x: number, y: number): void{
  console.log("object");
};

//存储函数类型，这两个有别于上面的，只是用作函数的类型约束，不是函数定义
let add: (x: number, y: number) => number;
type add = (x: number, y: number) => number;

首先，const let 后面跟的肯定是变量，一般是用来接收函数，即函数的别名；该函数别名后如果跟的是冒号，则是该函数的类型(也可能省略)，表现为接口或类型表达式，如：(x: number, y: number) => void，(注：只有函数类型表达式的返回值为=> 其他表现为: void)

其次，等号将语句分为两部分，前面是接收函数的变量，包括函数别名和类型（类型可省略），等号后面整体是一个函数，有function和箭头函数两种。等号后不可能是当前函数的类型。

要弄清函数定义的结构，可以先用等号定位两边，然后通过let/const 确定函数别名，然后再按上面定义进行划分。

如有疑问，请在评论区留言；如有帮助，请点个赞，Thanks♪(･ω･)ﾉ