Fixing Errors Exercise

[00:00:00]
>> Anjana Vakil: Now, we're going to add one more flag to our command We're just going to run it again We haven't edited any code yet We're going to add the strict flag, in addition to the ones that we used before Let's see what happens there Any difference from before What do we see Error, error, yeah, an error There's another error Any idea what's going on here with this strict flag

[00:00:38]
Sort of in the name This is telling TypeScript, hey, be really strict with me Don't let anything slide So we're going to see the same errors that we had before, but also another error, like, for example, a property that does not exist Whereas in non-strict mode, it's like, OK, well, I guess there's no reason you can't console log undefined

[00:01:09]
That's fine, that's valid No problem But in strict mode, it's like, no, no, no, no You should be using properties that exist So that's a problem That's an error I'm going to stop you there because I'm being strict with you, because you want me to, because we're trying to save your user's headaches by giving you the developer more headaches

[00:01:33]
So we've type checked some JavaScript so far Now it's time to actually use that information and fix these errors Now, we're going to dig in later into more about what that command did and what all those flags did, but for now, your mission should you choose to accept it, is to go through and fix these TypeScript errors and there might be multiple ways to fix this code to make it do something that you guess it's sort of intending to do

[00:02:09]
But most important is that once you've made your edits, this command that we just ran with the strict flag should not report any errors OK, so why don't we take a couple of minutes to fix those errors Like I said, there's more than one way to fix a JavaScript error, but let's work through this together and see how y'all solved it And most importantly, we want to make sure that once we've made our edits, and we can run this as many times as we need to, that when we run that tsc command with all of the flags, including strict, that we stop getting so many squiggles

[00:03:03]
OK So, can anybody walk me through one change that they made to this file Fix the spelling error, spelling errors, yes, so remember our new error from the strict flag Says here, property creator does not exist on type blah blah blah la la la Did you mean creator Yes, TypeScript, thank you I sure did I mean, I actually didn't because that was there on purpose, but OK, fabulous

[00:03:40]
So now, if I run my command tsc check js no emit strict check me .js Down to 2 errors, huzzah OK And another spelling error, perhaps Is that a console log where we get, well, that property doesn't exist And this time it didn't, you know, give us a super helpful like, did you mean, but we can figure it out OK, so hopefully folks changed line 23 to fix that spelling error

[00:04:18]
We saved the file, we rerun the command, and we're down to 1 error, huzzah OK, now this one's a bit different This error says type string is not assignable to type blah blah blah blah blah And we see some kind of weird syntax with semicolons and whatever, which we're going to look at TypeScript syntax later, but something objecty And the comment here gives us also sort of a hint

[00:04:52]
So what we had originally was this variable language assigned to an object with various properties, like name, JavaScript, etc But then because JavaScript doesn't care when we change the types of stuff out from under it, we can reassign the value of that variable language to be something that's not at all the same kind of thing, like a string

[00:05:20]
But that's probably not what we wanted So, this is the part where there's many different ways we could solve this, but could anybody, would anybody like to share what they did to make this squiggly line go away in our tsc output Update the name A dot name, OK, so one thing we can do is instead of setting it to be the whole variable of language, we can start kind of individually tweaking properties of this object and update the name, update when it was released, the creator, and etc

[00:06:12]
Etc Shall we, let's, OK, let's make that change, and we run it OK, cool, no more errors Great Now, is there anything else that's still like a bit weird in here So if language was originally this object, name, JavaScript official name, ECMAScript released 1995, created blah blah And we start updating different properties in here that apply to TypeScript

[00:06:54]
When we update the name, we update the release date, we update the creator, the company Why don't we try running this file just to see what happens And what I can do, I could run it with Node, I could run it in my browser I'm just going to put it in the TypeScript playground because we can And if I run it now, you should see all of the stuff that we intended to log here

[00:07:34]
Anything fishy This is the ECMAScript from the first Yeah, so we never actually updated the official name because TypeScript's official name is TypeScript We don't have this whole JavaScript ECMAScript dance And this is not an error This is not like a problem because neither TypeScript nor JavaScript knows anything about the official names of these objects that we're passing around

[00:08:00]
And so it's just doing, it's running the code that we told it to run However, later, we're going to see how we can actually make sure that let's say if I'm changing the language to be a language that doesn't have an official name, that there isn't an official name property Is there, I mean, this again, this isn't to fix the TypeScript error, but is there anything that we could do to not have the wrong official name in here

[00:08:40]
Does an official name even apply I mean, one thing we could do is set the official name to be TypeScript or our newly updated language.name, for example, we could do that Anything else we could do Yep, so now we get TypeScript, the official name We could also like delete the property entirely from the object Lots of different ways we could do this

[00:09:17]
So suffice it to say, TypeScript does not help us catch every bug in our code Like later, if I was, you know, rendering this into a website or something I might have been like, TypeScript's official name is JavaScript or ECMAScript, and that wouldn't really be correct behavior TypeScript isn't going to be able to fix everything about our code

[00:09:36]
We still need to write code We still need to think about our code and what we want it to do and how it's supposed to work, but it can help us fix a whole big bunch of errors like misspelled property names, different types of values than what we were expecting to have, etc Etc OK, so any questions on this exercise before we move on Just to recap

[00:10:15]
What we did is we ran the TypeScript compiler on a JavaScript file to check it out, to see if there's any problems And sure enough, it did find a bunch of problems, and they pointed us to exactly where those problems are and even gave us some hints about how to fix them, like, did you mean creator So we're starting to get a feel for how helpful TypeScript can be even without writing any TypeScript

[00:10:47]
And this is because TypeScript knows JavaScript It can help us write JavaScript And so back in the playground, if you want to poke around and, yeah, there's plenty of info in the handbook as I linked to before If you go into the examples at the top of the playground here, there's a whole class of JavaScript examples where it says see how TypeScript improves day to day working with JavaScript

[00:11:15]
And here you can see things like how does TypeScript help me with objects and arrays and things like that And so we're not going to go through all of this together here, but plenty of info to poke around and learn from on the official TypeScriptlang.org site, both in the playground, and if you go to the documentation, the Docs TypeScript for JavaScript programmers has like a whole bunch of information here as well

[00:11:54]
So, this is all like further exploration that we're going to do after the course But for now, we've already figured out how to use TypeScript as a type checker for JavaScript One of the many use cases.