Debugging with Type Checking

[00:00:00]
>> Burke Holland: TypeScript has become very popular. We haven't done any yet. We're gonna look at some a little later on. However, if you're a JavaScript developer, you actually may wanna use TypeScript without using TypeScript. Let me explain what I mean. If in this method here, let's say we had added something like this.

[00:00:23]
Let's say we'd added a console and we're gonna log out the color.
>> Speaker 2: Log not blog.
>> [LAUGH]
>> Burke Holland: Right, so we are now gonna console log this color, correct?
>> Speaker 2: You have canceled out blog.
>> Burke Holland: Yeah, we're not gonna console-
>> Speaker 2: Sorry [LAUGH] no-
>> Burke Holland: It's not gonna work.

[00:00:43]
I wish blog was a command, but it isn't. So now here's the deal. The problem is if you had a linter, the linter would pick this up, but let's just assume that you don't have a linter running. One of the cool things about TypeScript is that it lints for you.

[00:00:58]
So you don't actually have to be using TypeScript to exploit TypeScript's type checking and linting functionality in VS Code. This is one of the magical things about VS Code, it works with TypeScript with no configuration. Now, here's what you can do, I'm gonna come to the top here, and I'm going to put a comment.

[00:01:18]
And then I'm gonna put an at sign, and see how it popped up a mini there? And I'm gonna say ts-check, and then what that's gonna do is it's gonna start checking my JavaScript for me. So now it doesn't know about certain things, and it's like, I don't know what value is, and I don't know what blog is, and actually, if I press, I think it's f8, that will move us between the errors, so I'm pressing f8.

[00:01:41]
And we're just going down to the errors in the file, doesn't know what signalR is, that's a global variable. So I'm just gonna keep moving through. Doesn't see a style, doesn't think that's right. Some of these are okay, it's just TypeScript doesn't know what they are. But what's interesting is on the blog one, it says property blog does not exist on type console.

[00:01:58]
Did you mean log? Okay, so TypeScript knows a lot more, because of typing, it knows a lot more about your JavaScript than the linter does. So you can use TypeScript and exploit the brains of TypeScript to type check your JavaScript. Now, you probably don't wanna do this at the top of every file.

[00:02:19]
That does not scale. So, let's take this out and look at a different way of doing this.
>> Burke Holland: Let's open up our settings file, and I've got a lot of settings. And I'm gonna get him down here to the bottom. Actually, I wanna take out these favorite colors here.

[00:02:37]
Let's pull this out. And what I'm gonna do is I'm gonna add a setting called implicitProjectConfig.checkJs. Not super intuitive, but this basically says, check my project using the TypeScript compiler. That's what this setting means. So we'll set it on to true. Let's come back to our app file.

[00:02:59]
And we're getting the type checking now from TypeScript that we were getting with the comment before. You can also add that as a workspace setting instead of a global setting. So you want it to apply just to your workspace, a lot of times I keep this turned off until I get to a scenario where I got a problem and I'm having trouble debugging a JavaScript.

[00:03:18]
And then I turn it on, and I say, okay TypeScript, I can't find where the area is, what method am I calling that just doesn't exist? A lot of times you'll get an error object is not a function or undefined is not a function in JavaScript. The TypeScript compiler is really good for checking for that stuff.

[00:03:34]
So just know that you have that at your disposal. You can turn it on, let it check your JavaScript. It's basically like a pair programmer coming in to help you, it's really cool. All right, so that's typed, check in your JavaScript there. I think now since we changed our image, we're no longer running, let me go ahead and start that up again.

[00:03:57]
And I think since I've changed all the paths and everything, yeah, it's working. The button doesn't look so good, but close enough. You know what it is, I think I modified that. This, yeah, right here, it's not columns, columns. It's just columns.
>> Burke Holland: Better, okay. Now's your turn.

[00:04:19]
You get to go and go through all these steps and when you get the app running, feel free to change the colors on the lint to your heart's content.