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

Question

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.6 and some googling. I still cannot understand the meaning of =>.
To me, it feels like a pointer in C++. But I can't confirm it. If anyone can explain the following examples, that will be great. Thank you!

Below are some examples that I found when I was reading the specification of 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 number type? Is this a constructor or a function for 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?

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

This might also help: http://www.codebelt.com/typescript/arrow-function-typescript-tutorial/ — zedfoxus, Dec 14 '15 at 19:04
Glad to see someone from C++ background posted this. Its tough to digest this kind of signs appear just next to function definition. — Atul, Jan 28 '22 at 09:30

score 125 · Accepted Answer · answered Dec 14 '15 at 19:01

125

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, x and y, both numbers. It is not assigning a function to that variable. In contrast, compiling:

var MakePoint = () => 1;

produces:

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

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

answered Dec 14 '15 at 19:01

mk.

11,360
6
40
54

4

If MakePoint is a function, why not just use regular JavaScript function declaration? For example `function MakePoint() { ...} ` ? – Shaohao Dec 14 '15 at 19:04
10

@ShaohaoLin It is shorter and omits the name (`()=>...`), and it preserves the scope of `this` which means you no longer have to create `var self = this` variables, or pass `this` through function arguments. [More info here](https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Functions/Arrow_functions) – mk. Dec 14 '15 at 19:07
How can I access the property `x` and `y` in your example of `var MakePoint = () => 1` ? `x` and `y` are both assgined to `1`? – Shaohao Dec 14 '15 at 19:14
1

@ShaohaoLin In the first case [via `MakePoint().x`](http://www.typescriptlang.org/Playground#src=var%20MakePoint%3A%20()%20%3D%3E%20%7Bx%3A%20number%3B%20y%3A%20number%3B%7D%3B%0D%0AMakePoint().x). `MakePoint` is a function that returns an object with a property `x`. But in the second case, you must rewrite it as `var MakePoint = () => ({x: 1, y: 1});` (note the `()` around the object) so that it returns the object you want instead of the number 1 (which I was using as an example). – mk. Dec 14 '15 at 19:18
@ShaohaoLin I'm sorry, I don't understand what you are asking in your added question. Usually it is much easier to just ask a new question, since you have more space to explain what the question is. Also, if you add info later, this confuses readers and nobody will come back to look at your changes/new questions. – mk. Dec 14 '15 at 19:24
Ok. I will make it a new question! Thank you for the explanation. I need to digest a little bit to see if I can make sense myself on the updated question. – Shaohao Dec 14 '15 at 19:26
https://www.tutorialsteacher.com/typescript/arrow-function Maybe read this article it explains the fat arrow function really well with examples and use cases. I'm also a new learner like you and this article really help me understand the concept of fat arrows. – stephen carvalho Apr 06 '22 at 17:34

score 37 · Answer 2 · edited May 23 '17 at 12:26

37

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) => any means "callback is a parameter whose type is a function. That function takes one parameter called result of type string, and the return value of the function is of type any".

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

edited May 23 '17 at 12:26

Community

1
1

answered Dec 14 '15 at 18:58

Ryan Cavanaugh

209,514
56
272
235

So in this case, is callback just the name of function? – Shaohao Dec 14 '15 at 19:09
1

@ShaohaoLin it is the name of a parameter, and the type of that parameter will be a function (but the name of whatever function you pass in as an argument can be anything) – mk. Dec 14 '15 at 19:10
this is actually the only answer explaining there is a difference between the fat arrow in typescript and in emca script – oshell Dec 27 '16 at 16:25
@ryan, can you explain what this means . `p => this.people = p` What does second equal mark do here? – vigamage Mar 22 '17 at 16:08
`=` is the assignment operator in JavaScript – Ryan Cavanaugh Mar 22 '17 at 18:00
1

yeah, but what is the meaning of the entire line? is it "p is a variable whose type can be any and it returns this.people of which the value is equal to p(at the right) ? " ? But anyway I cannot understand it. :( – vigamage Mar 23 '17 at 03:57
@vigamage: It is equivalent to `(function (p) { return _this.people = p; });` – Farhan stands with Palestine Dec 12 '17 at 17:04

score 28 · Answer 3 · edited Jan 09 '22 at 17:59

28

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

MakePoint is a variable. Its type is a function that takes no arguments and produces numbers x and y. Now does the arrow make sense?

edited Jan 09 '22 at 17:59

aerin

20,607
28
102
140

answered Dec 14 '15 at 18:59

Eric Lippert

647,829
179
1,238
2,067

1

The above is the best answer. – Niklas Rosencrantz Mar 18 '18 at 16:31

score 15 · Answer 4 · answered Apr 26 '18 at 06:37

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

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:

You don't need to keep typing function.
It lexically captures the meaning of this.
It lexically captures the meaning of 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:

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

score 7 · Answer 5 · answered Dec 14 '15 at 18:59

7

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

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

7 Answers7

Linked

Related