TypeScript 中的“=>”是什么意思？(胖箭)

What's the meaning of "=>" in TypeScript? (Fat Arrow)

提问by Shaohao Lin

I just start to learn TypeScript, and I saw there is a lot of code using this sytax =>. I did some research by reading the Specification of TypeScript Version 1.6and some googling. I still cannot understand the meaning of =>.
For me, it feels like a pointerin C++. But I can't confirm it. If anyone can explain the following examples, that will be great. Thank you!

我刚开始学习 TypeScript，我看到有很多代码使用这个 sytax =>。我通过阅读TypeScript 1.6 版规范和一些谷歌搜索做了一些研究。我仍然无法理解=>.
对我来说，感觉就像C++ 中的一个指针。但我无法确认。如果有人可以解释以下示例，那就太好了。谢谢！

Here are the examples that I found when I was reading the specification of Typescript :

以下是我在阅读 Typescript 规范时发现的示例：

Object Types

对象类型

var MakePoint: () => {  
    x: number; y: number;  
};

Question: What is this code doing? Creating an object called MakePoint, where x and y fields are numbertype? Is this a constructor or a function for MakePoint?

问题：这段代码是做什么的？创建一个名为MakePoint的对象，其中 x 和 y 字段是数字类型？这是MakePoint的构造函数还是函数？

Function Types

函数类型

function vote(candidate: string, callback: (result: string) => any) {  
 // ...  
}

Question: What is the meaning of => any? Do you have to return a string type?

问：什么意思=> any？你必须返回一个字符串类型吗？

Can anyone explain me the difference or the purpose of these examples in plain english? Thank you for your time!

谁能用简单的英语向我解释这些例子的区别或目的？感谢您的时间！

回答by mk.

Perhaps you are confusing type information with a function declaration. If you compile the following:

也许您将类型信息与函数声明混淆了。如果您编译以下内容：

var MakePoint: () => {x: number; y: number;};

you will see that it produces:

你会看到它产生：

var MakePoint;

In TypeScript, everything that comes after the :but before an =(assignment) is the type information. So your example is saying that the type of MakePoint is a function that takes 0 arguments and returns an object with two properties, xand y, both numbers. It is not assigning a function to that variable. In contrast, compiling:

在 TypeScript 中，:在=（赋值）之后但之前的所有内容都是类型信息。所以你的例子是说 MakePoint 的类型是一个函数，它接受 0 个参数并返回一个具有两个属性x和y两个数字的对象。它不是将函数分配给该变量。相比之下，编译：

var MakePoint = () => 1;

produces:

产生：

var MakePoint = function () { return 1; };

Note that in this case, the =>fat arrow comes after the assignment operator.

请注意，在这种情况下，=>粗箭头位于赋值运算符之后。

回答by Ryan Cavanaugh

In a type position, =>defines a function type where the arguments are to the left of the =>and the return type is on the right. So callback: (result: string) => anymeans "callbackis a parameter whose type is a function. That function takes one parameter called resultof type string, and the return value of the function is of type any".

在类型位置，=>定义一个函数类型，其中参数在左侧，=>返回类型在右侧。所以callback: (result: string) => any意思是“callback是一个类型为函数的参数。该函数接受一个名为resulttype 的参数string，函数的返回值是类型any”。

For the expression-level construct, see What's the meaning of "=>" (an arrow formed from equals & greater than) in JavaScript?

有关表达式级构造，请参阅JavaScript 中“=>”（由等于和大于组成的箭头）的含义是什么？

回答by Eric Lippert

var MakePoint: () => {  
    x: number; y: number;  
};

MakePointis a variable. It's type is a function that takes no arguments and produces numbers x and y. Now does the arrow make sense?

MakePoint是一个变量。它的类型是一个不带参数并产生数字 x 和 y 的函数。现在箭头有意义吗？

回答by Mohd Belal

As a wise man once said "I hate JavaScript as it tends to lose the meaning of this all too easily".

正如一位智者曾经说过的“我讨厌 JavaScript，因为它太容易失去意义”。

It is called the fat arrow(because ->is a thin arrow and =>is a fat arrow) and also called a lambda function(because of other languages). Another commonly used feature is the fat arrow function ()=>something. The motivation for a fat arrow is:

它被称为粗箭头（因为->是细箭头并且=>是粗箭头），也称为lambda 函数（因为其他语言）。另一个常用的功能是胖箭头函数()=>something。粗箭头的动机是：

1. You don't need to keep typing function.
2. It lexically captures the meaning of this.
3. It lexically captures the meaning of arguments

1. 你不需要一直打字function。
2. 它在词汇上捕获了 的含义this。
3. 它在词汇上捕捉到了 arguments

---

---

function Person(age) {
this.age = age;
this.growOld = function() {
    this.age++;
  }
}

var person = new Person(1);
setTimeout(person.growOld,1000);

setTimeout(function() { console.log(person.age); },2000); // 1, should have been 2

If you run this code in the browser this within the function is going to point to window because window is going to be what executes the growOld function. Fix is to use an arrow function:

如果您在浏览器中运行此代码，该函数中的 this 将指向 window，因为 window 将是执行 growOld 函数的对象。修复是使用箭头函数：

---

---

function Person(age) {
this.age = age;
this.growOld = () => {
    this.age++;
  }
}
var person = new Person(1);
setTimeout(person.growOld,1000);

setTimeout(function() { console.log(person.age); },2000);// 2

回答by mmcclannahan

It is called a "fat arrow". It was added in EcmaScript6 and replaces the function keyword among other things.

它被称为“胖箭头”。它是在 EcmaScript6 中添加的，并取代了 function 关键字等。

More can be read here.

更多内容可在此处阅读。

回答by Amit

Directly from the link in OP:

直接从 OP 中的链接：

In this example, the second parameter to 'vote' has the function type

(result: string) => any which means the second parameter is a function returning type 'any' that has a single parameter of type 'string' named 'result'.

在这个例子中，'vote' 的第二个参数具有函数类型

(result: string) => any 这意味着第二个参数是一个返回类型“any”的函数，它有一个名为“result”的“string”类型的单个参数。

回答by Ashok Kumar

Simply its been used in place of anonymous functions.

它只是用来代替匿名函数。

The below code

下面的代码

function(argument){
return argument. Length
}

will be transformed to argument => {argument.length};

将转化为 argument => {argument.length};

For better understanding refer the below: https://codecraft.tv/courses/angular/es6-typescript/arrow/

为了更好地理解，请参阅以下内容：https: //codecraft.tv/courses/angular/es6-typescript/arrow/

回答by uyghurbeg

It is An Arrow Function a.k.a. Fat Arrow Function.

它是一个箭头函数又名胖箭头函数。

Read More: enter link description here

阅读更多： 在此处输入链接描述