Functions

[00:00:00]
>> Mike North: Lets talk about functions a little bit and just as JavaScript treats functions as first class value types and so that doesnt change. One of the more interesting things we can do with functions as it pertains to types is we can define the kinds of arguments we expect to get.

[00:00:19]
And so we have an array here and we're saying I expect this to be the type of mouse listeners is an array, coz that's what this little thing here over here means. It's an array of functions, each of which takes us an argument a mouse event. So we can call this a mouse listener.

[00:00:38]
And then down here you can see like, we have naively attempted to hook these functions up in such a way that this key press event, when it's fired, we're gonna take this array of mouse listeners and whatever event we get here we're gonna try to invoke each mouse listener with that.

[00:00:59]
But a key press that's gonna give us a keyboard event. So here TypeScript will tell us, whoa you said you were expecting this type, now you're trying to invoke the function with a different type. Those are not equivalent. Stop, fix it. So here it's like you're saying the first piece of information you get is, we couldn't like basically take a keyboard event and regard it as a mouse event.

[00:01:29]
We couldn't, because some structure was not there. And then the second line here tells us exactly the first problem that it ran into. And it's the button. There's a button property on the mouse event object. That is not on the keyboard event. A more abbreviated way to represent functions is through arrow functions here.

[00:01:52]
This looks much nicer to my eyes here. This would say. We have a type called requestHandler and we take in an argument, we can call it request. So if we had multiple named arguments this would be a way to do that. And we return a response. So now this is the first time we are seeing that we can define exactly what types we expect functions to return.

[00:02:16]
That right there is probably one of the biggest wins you can get in terms of getting all of your code completion in your own projects to work really nicely. If you just start with functions, return, particular types. Now when you call a function it returns a value, you get that as a variable.

[00:02:31]
Now all of that autocomplete stuff will work on those variables, right?
>> Mike North: So we could also have used, we could have defined this as sort of its own named function and used this JS dock annotation, @return. Which you will see, you'll see that in a couple places in the code already, there's some of that sprinkled in.

[00:02:53]
Just keep in mind static analysis is not the whole picture. It's not like an iron clad guarantee. For example, if you pass functions as arguments those are not validated for argument types. So if I had those mouse listeners and instead of iterating over an array of things I know are mouse listeners and basically saying, here's a function, pass me an argument and that argument should be a function that takes a number.

[00:03:22]
That is not checked at the time that that argument is passed. It's only when we use the function that the arguments are validated. And only in terms of the type information we have. So, just know that there are limits as far as like what static analysis can do.

[00:03:41]
Cuz all it can do is try to like learn as much as it can without ruining your program.