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 Versio

Answer 1

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.

Answer 2

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:

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

---

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

Answer 3

Directly from the link in 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'.

Answer 4

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

Read More: enter link description here

Answer 5

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

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

Answer 6

Simply its been used in place of anonymous functions.

The below code

function(argument){
return argument. Length
}

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

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