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

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

首先来看普通函数的定义


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♪(・ω・)ノ

你可能感兴趣的:(前端基础,typescript,javascript,前端)