Integrated Development Environments Superpowers 13 exercises

Fixing Errors with Hovering

Hovering can help us understand and resolve errors in various ways.

First of all, we can hover over the red squiggly error itself. In this case, hovering over 12, we get the following error message:

Argument of type 'number' is not assignable to parameter of type 'string'.


Loading solution


00:00 Okay, so hovers can help here in a bunch of different ways. First of all, we can hover over the error itself here, and this will actually tell us what's going on. Argument of type string or number is not assignable to parameter of type string. And we'll even here get a readout of this getElementById here.

00:17 So what's happening is if we look at this, you may know like just off the top of your head that getElementById requires a string, great. But if you weren't sure, and let's say this was an external library that you'd really never used before, just hover over getElementById, and you can see it's a method, first of all,

00:35 and we've got document.getElementById, and the element ID it requires is a string. So it requires string. So just by seeing that red line and actually just doing a bit of contextual hovering, we don't even need to read the error message, which is amazing. And the thing that it returns here is HTML element or null.

00:55 So that's what that means. So this is what this element is, HTML element or null. Very cool. So we know now, given that we can just sort of scan over all of this stuff, and by the way, the other thing that we didn't hover is documents, var documents, documents. And you notice with the stuff that comes from the DOM, we actually get a little MDN reference here

01:14 that we can go and click to. We can just go and see the MDN reference for this thing, in this case, which is documents, which is the globally available document thing that you can add stuff to to do some DOM manipulation. So in order to fix this, we just change this to a string, and now everything's happy. Beautiful.