CODEWITHSUNDEEP
typescript
Shaohao
Shaohao

Reputation: 3511

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

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!

Upvotes: 106

Views: 121952

Answers (7)

Eric Lippert
Eric Lippert

Reputation: 660289

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?

Upvotes: 29

Ashok Kumar
Ashok Kumar

Reputation: 21

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/

Upvotes: 2

Mohd Belal
Mohd Belal

Reputation: 1189

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

Upvotes: 17

Amit
Amit

Reputation: 46341

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'.

Upvotes: 3

mk.
mk.

Reputation: 11730

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.

Upvotes: 127

mmcclannahan
mmcclannahan

Reputation: 1758

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

More can be read here.

Upvotes: 7

Ryan Cavanaugh
Ryan Cavanaugh

Reputation: 221192

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?

Upvotes: 37

Related Questions