This course has been updated! We now recommend you take the TypeScript Fundamentals, v3 course.
Transcript from the "Lexical Scope" Lesson
[00:00:00]
>> Mike North: JavaScript has this thing called lexical scope. Lexical scope just means, what is the value of this when you invoke a function, right? This is important if you deal with, building something like a single-page app, and you have components, and those components have things that are bound to DOM events.
[00:00:22] You need to make sure that your events fire in a way that allows you to access stuff on your component, to make things nice and convenient. So this is actually part of a function signature, so if you're defining a function? And usually, it's gonna be a function that's outside the context of a class, right, cuz classes already kinda handle this for us.
[00:00:46] But if you're gonna really depend on being able to do something like what we're doing here, we need the value of this to be correct. So you only need to put in your function signature at the very beginning, under a pseudo-parameter called this, and type-checking will be done to make sure that everything looks okay.
[00:01:09] So I'm gonna create an object that kind of meets this constraint, so that we can see, explore how this works. Has both an email and a phone number, there we go, down here. And I'm creating a function called invokeSoon, and it's deliberately passing null along as the lexical scope.
[00:01:33] And it's a little bit contrived, but I'm just trying to show you kinda how this works.
>> Mike North: So If we try to invoke this, we'll see that it's not enough to just pass email along, right? We have a string here that can be email or phone. No matter which one I pick, I still get a type-checking error, and the reason is, this constraint is not satisfied.
[00:02:00] We could solve this two ways, we could bind the function,
>> Mike North: Create a bound version of the function. So behind the scenes, we're creating a closure around the function, and ensuring that it's invoked with the correct lexical scope. Or we could use call and apply, and as of a very recent TypeScript release, it escapes me which one, you can enable strict type-checking with bind, call, and apply.
[00:02:32] You don't run into this a lot, but now you understand everything, everything you really need to know to get started with functions. And note that, of course, we don't, this appears to be an additional argument, you do not have to pass two arguments to this function. This function accepts one parameter, still.