Enabling TypeScript Checking0:00
So take a look. I'm going to visit this file I have, player.js. Don't worry about the code too much. It's just a wrapper around the Vimeo API for performing some common actions, like adjusting the volume, or adjusting the playback rate, and handling some side effects that need to take place when you do that. Anyways, if I go to the top, I'm going to add this little comment here, ts-check. Now, ts, of course, refers to TypeScript, but what's very nice is, in Visual Studio Code, it will also work even for a generic JavaScript file. So if I save that immediately, we see a few things pop up. So once again, if I remove that, it goes away, and in fact, I can hit Shift-Command-M to bring up my Problems tab, or of course, I can search for problems within the command palette. Anyways, if we bring that back, at the moment we can just see one. However, this can even do quite a bit more. For example, what if we call a method that doesn't exist? Alright, well now it's going
Catching Missing Methods0:48
Anyways, if we bring that back, at the moment we can just see one. However, this can even do quite a bit more. For example, what if we call a method that doesn't exist? Alright, well now it's going to pick up on that. Hey, you're trying to call a method that doesn't exist on this. And once again, if we get rid of that, you don't have any feedback at all in that regard. Okay, great. So let's click on that, and here you'll see a little light bulb, or on the Mac you can hit Command-Period to bring that up. We can either ignore it, disable checking entirely, or maybe we need that method. So let's run that, and now the placement, I would say, isn't ideal, but nonetheless it will do that for you. And you can move that with Option-Down wherever you need to. Okay, so that means even for basic workflow, you could do things like this. Do something. Save that. It's going to let you know, hey, that doesn't exist. Command-Period on the Mac. Let's go ahead and declare that as a method.
Subclassing and Super Calls4:35
you're reassigning it to a string. Something's fishy going on here. So yeah, even if it's valid JavaScript, it's going to squawk at things like that. You would need to set it to another Boolean. Next, imagine that this class is actually a subclass. Now, it's not in real life, but for the video, I've set up a VimeoPlayer class for the demo. Now, immediately, we can see a bunch of squawking here. So first, it doesn't know what VimeoPlayer is. We haven't imported that. Next, super must be called before accessing this. So this is just a basic rule of ES6. So if we have a constructor in the subclass, let's make sure we call the parent as well. Okay, so now that just brings us down to cannot find name VimeoPlayer. Now, like I said, I set up this little VimeoPlayer class. It doesn't do anything. But VisualStudioCode can see this. So if I hit command period, or I click on the light bulb, it'll say, hey, do you want to
Auto-Importing Dependencies5:18
I set up this little VimeoPlayer class. It doesn't do anything. But Visual Studio Code can see this. So if I hit command period, or I click on the light bulb, it'll say, hey, do you want to import that? Yes, we do. And notice it's smart enough to know, well, VimeoPlayer is the default export. So I can format it like this. Whereas if I were potentially exporting multiple things, I could say export class VimeoPlayer. So now it's not the default export. And once again, over here, it's going to squawk. So now let's clear that out. And if we were to try it again, import it. Now it knows to import specifically VideoPlayer from that module. Okay, so that's just a quick review of some optional TypeScript checking. If you want, when you're done, feel free to delete this. And in the next video, we're going to talk a bit more about the refactoring capabilities that Visual Studio Code offers out of the box.
