TypeScript 中的 function 和 => 有啥区别？ [复制]

Posted 2023-04-18

【中文标题】TypeScript 中的 function 和 => 有啥区别？ [复制]

【英文标题】：What's the difference between function and => in TypeScript? [duplicate]TypeScript 中的 function 和 => 有什么区别？ [复制]

【发布时间】：2017-04-28 04:21:14

【问题描述】：

目前，我正在学习 TypeScript。我对关键字函数和=>（胖箭头）之间的区别感到很困惑。请看下面的代码：

interface Counter 
    (start: number);
    interval: number;
    reset() : void;


let a = <Counter>function(start: number)  ;
let b = <Counter>(start: number) =>  ;

a.reset(); //OK
b.reset(); //error: Property 'reset' does not exist on type <Counter>(start: number) => void

看来胖箭头和关键字函数的作用不一样。

【问题讨论】：

这与 TypeScript 无关。这纯粹是一个 JS (ES6) 问题。 SO 上的数百篇博文、文档页面和问题都很好地解释了这种差异。

@torazaburo 知道了。非常感谢。

【参考方案1】：

与函数表达式相比，胖箭头函数的语法更短，并且在词法上绑定了 this 值。箭头函数始终是匿名的，可以有效地将function (arguments) return expression; 转换为(arguments) => expression。如果在箭头后使用表达式，则返回是隐式的，因此不需要返回。

【讨论】：

“胖箭头函数”这个词已经过时了。正确的术语是“箭头函数”。

【参考方案2】：

这一切都是为了在 javascript 中保留上下文/范围。看这里：What is this in JavaScript and Typescript。