Catching JavaScript Mistakes with TypeScript

[00:00] This video will use only Vanilla JavaScript, but TypeScript will still catch many common JavaScript mistakes. We'll use the TypeScript playground which runs the compiler directly in your browser.

[00:12] I've prepared valid JavaScript that runs with no exceptions, but still contains mistakes. Let's paste the JavaScript into the TypeScript playground and see what happens. Look at all the mistakes TypeScript found.

[00:26] Let's go through them one by one. Here TypeScript said, "Duplicate identifier title," because there are two title properties in the same object. Let's fix this by deleting the second title. TypeScript said, "Property IMDB does not exist," because the IMDB in our moving object is in all caps.

[00:49] Let's fix this by changing the reference to match. TypeScript again said, "Duplicate identifier," this time because the function argument X is repeated. It should be Y, so let's fix that.

[01:05] TypeScript said it cannot find name X, this means I forgot to add this, so JavaScript would've been looking for X on the global scope. Let's fix it by adding this before each property. The next error is interesting. TypeScript cannot find the get tie method on type string.

[01:29] A string? Where did that come from? True story. The date function returns a string if we forget to use new. Let's fix that, so get time can work properly.

[01:43] TypeScript says, "Property get ailment by ID does not exist." It once took me 20 minutes to realize I made this mistake. Our edit caused TypeScript to find a new error. Type bullion is not a sign of all to type string.

[02:05] Why does TypeScript think our answer variable is a bullion? Because that's what the built in confirm function returns, however, we want the user to type an answer, not just confirm or cancel. Let's use the prompt window function to fix this logic.

[02:27] TypeScript found another typo. To fix seems simple, but now we discover a larger problem. Type void is not a sign able to type EV event>any. This arrow is shorthand for a function. In ECMAscript 6, and TypeScript, the error message is trying to tell us that documental unload expects to be assigned an event handler reference.

[02:54] However, it's receiving a void type. The problem is that we're executing the handle load function now instead of passing the function itself. This is a classic mistake I'm sure many of us have made at some point. Let's fix that.

[03:11] Our next error will reveal a mistake in the opposite direction. TypeScript says, "The greater than operator cannot compare a function with a number." Math or random works much better when we actually call it. let's make that coin toss a fair one. This error message looks complex, but let's focus on the function return text following the arrows.

[03:33] TypeScript expects this function to return a bullion, but it's returning a string. Why a bullion? TypeScript knows that when we test every element of an array with the every method, the tester function must return true or false. In our case, we want to test if every coin toss equals heads.

[03:56] Unfortunately, we used the wrong equals operator. Let's fix that so our test works properly. TypeScript catches us trying to find the length of a bullion. What we're trying to do is to log the number of coin tosses to variable named all heads, is a bullion describing all of the tosses, but the actual coin tosses are in the tosses variable, which TypeScript knows is an array of strings.

[04:25] Let's swap out that variable to resolve the error. Our final example, will demonstrate one of my favorite TypeScript discoveries. The error message says, "Client X does not exist on keyboard event." Where did that come from?

[04:41] Hovering over the event parameter, we see that TypeScript expects it to be a keyboard event, but how? Because our event type string is key down, TypeScript infers a keyboard event should be passed to the listener, but we want the mouse coordinates. Let's use the mouse down event type.

[05:04] Now TypeScript knows the event is a mouse event, and it's safe to call client X and client Y.