TypeScript Tutorial #11 - The DOM & Type Casting

Key Takeaways

alright then going so just like in regular JavaScript we can use typescript to interact with the Dom to query elements of data HTML react to events like button clicks or farm submits etc now before we dive into that I just want to explain one thing I've deleted the sandbox ES file right here and I've replaced that with an app dot CS file because we're going to start to create the code now for this up and I've also had that compiled even though it's empty at the minute - up Jes down here and inside the index file I've linked to that app.js file so that's all I've done so far so then for the most parts when we work with the dubbing typescript it is the same as when we work with the Dom in JavaScript we can still use the same query methods and event listeners etc and we can still access all of the same properties on the Dom elements but there are a few key differences to be aware of so first of all let's just dive right into an example I'm going to say Const anchor is equal to document dot query selector just like we would in JavaScript and that is going to grab an anchor tag okay so that's exactly the same so far as we would do in JavaScript and inside our HTML we have an anchor tag or right at the bottom in the footer right here so it should grab that that's the only one on the page now then watch this if I come down here and say console dot log and I want to log the anchor tag out and save this then over here we can see that we have the anchor tag but if I try now to access a property of it such as href which we can do we get some kind of error now why is that well if we hover over this it says that this object is possibly null so it's saying well this right here might actually be null and the reason it's saying that is because typescript doesn't actually know whether there is an anchor tag in the index page during developments it doesn't have some kind of special access to the index page to be able to find that out so it's just warning goes here that look this could be null and if this is norm then you're not going to get an H ref property on it so we can combat this in one of two different ways first we could do some kind of a runtime check we could say if anchor and if that is true it means it's not null then we can log this out to the console and that's going to take away the error and then this will work right or the other way if I logged out let me just paste that down here again currently we get the error if we are certain as developers that this thing exists inside our HTML file what we can do is add on an exclamation mark to the end of that query selector and now that error goes and that is also as developer sane look I know that this is going to return some kind of value an anchor tag and not null I know that for definite so you don't need to give me this error down here so now it knows that this is actually going to be an HTML element and we can access this property on it now another cool thing about using typescript for Dom interaction is that it automatically contains special types for every Dom elements so if I hover over this we can see that Const anchor is an HTML anchor element that is the special type of this variable this means that when we use the anchor variable typescript knows all of the different properties and methods on that type and it's going to make them available to us in some kind of intelligence so if I say anchor dots it knows it's an anchor tag and so we can use all of these different methods or properties on that that are available to an anchor tag which is nice okay so let's move on to another example I'm going to now try and grab this form right here so it's a form tag but it also has a class of new item form so let me just comment out all that jazz first of all and then what I'm gonna do is say Const form is equal to documents dots query select all and we want the form tag now again I could say exclamation mark to say look I know this exists and when I do that and hover over it I can see that this now as a type of HTML form element now this is fine but what if I had several different forms on one page well we couldn't be certain that this gets the right form on the page there so we could use a class instead so if I comment this out what I could do instead is say Const form is instead equal to documents dots query selector and I think it's called the new item form we want this class right here let me copy that dude and paste it right here like so and it's gonna still grab that same thing but even if I add an exclamation mark over here when I hover over this now it's gonna say that this is of type element and not the HTML form elements so why is that well it's because when we use form or anchor tag typescript knows what tag we're grabbing now in this case we're just passing a class and a class could be applied to any different element in the HTML page so it doesn't know that it's a form it just knows that it's going to be some kind of elements so how do we combat this well we can use something known as typecasting to say what this is going to be what type of element this is going to be we can cast it to be a certain type and the way we do that is by saying as and by the way we take off our exclamation mark when we use us because if we say as it's never going to be null it's always going to be of a certain type that we cast it to so I could say as and then it's gonna be a tml form elements okay so now when it grabs this instead of storing it as element type it uses this type instead HTML form elements and if I hover over that now I can see that so therefore we get all of the right properties and methods available to us in some form of intellisense inside the vs code which is nice okay so now I could say something like console.log and I'm going to get the form I could say dots to get all of the different properties and methods available to us and I could choose one of these if I go to the top and just gonna choose something like children if I can find it there it is okay cool save it oops there we go and we should see all of those right here an HTML collection with these different fields awesome that's all of the children of the form okay so let's try that and grabbing the different input fields inside that form so I could say inputs and then down here I'm going to say Const type and I'm saying Const ight because it's this field I'm grabbing first of all and I don't just want the fields I want the actual inputs themselves so I'm gonna say that constant type is equal to documents dot query selector and then I can't say input because I don't know which import I'm going to get them instead I want to go over here and use the different IDs that I've given to these different form fields so this first one right here has an ID of type so we'll say hash type to grab the ID now again if I hover over this it just says it's gonna be elements or null it says or null because we've not done the exclamation mark now it's just elements but I can typecast this and I could say as HTML select elements okay because this is a select field right here awesome so now I want to get the second one and that is going to be in fact what we'll do is just duplicate this and this time it's not going to be type it's going to be two from this is going to be this thing right here this input so I'm going to grab the ID two from and paste it right here this time it's not a select element it's an HTML input elements okay and that's this thing right here so we can do the same for the other two so I'm going to go down again and this time it's going to be details so let me copy that and paste it over here and over here as well and that is also an input element and the third one if I go down is going to be called a mount and the ID of that you'll just have to trust me is a mount and that is also an input field okay so this is still inputs elements awesome so now we have access to all of those input fields why don't we now try adding an event listener to the form so that when a user submits the form we can access these different fields and maybe lock them to the console so let's do that I'm going to comment out this log up here first of all then down here I'm going to grab the form which we have stored right here and I'm gonna say add events listener it's going to be a submit event and then I'm going to fire a callback function when this occurs this is going to take in a parameter E which is of type events built into typescript it's an event object and then inside this function I want to first of all say e dot prevents default that prevents the page refresh in the default behavior when we submit a form and then down here I'm going to console dot log all the different values so first of all type dot that's this thing right here and dot value just gets us the value that is currently inside the Select or the input field so type top value first of all then to from dot value then we want details doc value and then finally we want amounts don't value as well okay so let's see if this works come over here so we'll change this to payments we'll say yoshi and we'll say website work and then the amount is going to be 200 add let's see this works we see payment yoshi website work and 200 now I deal it in the future I want this to be a number but by default even though this is a number right here that were inputting JavaScript turns that into a string version of the number now what we could do to combat this is say instead of just a value value as number and then it turns this into a number forest so if I do this again just put any old junk in here and then do an amount of 400 AD this is now a number and we can see that because it's blue in the console and when we say blue number in the console it means it's of number type and not a string cool so there we go my friends that is the crux of interacting with the Dom in typescript we'll build on this later but for now I wanna move on to something else classes