3

I'm reading the TypeScript Handbook and in the Functions section under the Function Types heading there is this example (which I understand):

let myAdd = function(x: number, y: number): number { return x+y; };

This is followed by

let’s write the full type of the function out by looking at the each piece of the function type.

and this syntax:

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x+y; };

Could someone break this down and explain it as I have never seen this before and can't find an explanation in the handbook?

Improve this question
3
  • 1
    The handbook explanation is in the paragraphs immediately following the bit you quoted. Commented Aug 3, 2017 at 13:34
  • 1
    It's explained in the section you linked? "A function’s type has the same two parts: the type of the arguments and the return type. When writing out the whole function type, both parts are required." "The second part is the return type. We make it clear which is the return type by using a fat arrow (=>) between the parameters and the return type." Commented Aug 3, 2017 at 13:34
  • @AndyJ Yeah, I was getting the use of the fat arrow muddled with arrow functions in my head and also hadn't seen the use of the fat arrow in this way before. Just needed it cleared up. Commented Aug 3, 2017 at 13:59

2 Answers 2

Reset to default
4

This line:

let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x+y; };

Consists of 3 parts:

(1) The variable declaration, this part is the let myAdd. I assume that there's nothing to add here, it's just like with js.

(2) The type of the variable: (x: number, y: number) => number.
Here we're defining a type of a function that expects two parameters, both of type number, named x and y.
The function needs to return a number.

(3) The assignment of the value to the variable: = function(x: number, y: number): number { return x+y; }.
This is just like javascript as well, except for the added types for the params and return value.
If you look at it you'll see that the actual implementation matches the declared type perfectly.

You can also write it like this:

let myAdd: (x: number, y: number) => number = function(x, y) { return x+y; };

Or:

let myAdd: (x: number, y: number) => number = (x, y) => { return x+y; };
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Thanks. The main thing that confused me (even though explained further down in the handbook) was the use of => having only seen it used with arrow function syntax. Does its use in both cases have the same meaning then?
In typescript when you're writing a function type you use this notation for the result type. For example: type MyFunction = (num: number, str: string) => void. Don't mix it up with the arrow function.
@camden_kid Quite similar, yet not the same. Arrow function do not bind this.
@k0pernikus That link has nothing to do with it. How you implement the function is irrelevant to the type. The use of a fat arrow in the type definition has nothing to do with the arrow functions
@NitzanTomer The fog is lifted. I understand it now and also why I was getting a bit confused.
1

The first line:

let myAdd: (x: number, y: number) => number

Is declaring the type of the variable "myAdd". Typescript can automatically infer this in the first example, alternatively (which the second example shows) you can implicitly tell Typescript what it should expect.

The second line:

function(x: number, y: number): number { return x+y; };

Refers to the type of the function itself which you have assigned to the variable "myAdd".

For a simpler example illustrating the same thing:

let myString: (input: string) => string = (input: string) => input;

Alternatively a different example of implicitly declaring the variables type:

let myNumber: number = 10;

Both of the above tell Typescript what the variable should be.

Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.