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!
Solution 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.
Solution 2:
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?
Solution 3:
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?