Work with DOM Elements in TypeScript using Type Assertions
The DOM can be a bit tricky when it comes to typing. You never really know exactly what you're going to get, so you have to educate your codebase into what you know you're using. This is done using Type Assertion where TypeScript types know they're a certain type, but you give it additional information so you can access the properties and methods that you know will be available.
Instructor: [00:00] I have an input element here. One of the first things I see people run into is if they reference that element with a document get element by ID, I gave it an ID of input, they'll try to do something like input.autofocus and set that to true. You see right away, you got a big red squiggly saying autofocus doesn't exist on HTML element. That's because get element by ID returns an HTML element.
[00:31] What you may try to do is give your input a type of HTML input element. But that creates an error over here, saying that you can't assign an input element as an HTML element. What you can do is move this type over to the right-hand side and say I want this as this type. Now my input is treated as that HTML input element. That squiggly's gone. My autofocus works when I click over here.
[01:03] The issue that always comes up next is when you add an event listener. Input add event listener. We'll listen to the input event and write a handler function for the event. We always try and log out the event.currenttarget.value.
[01:20] Then, you get the red squiggly saying that value does not exist on event target. Because of the way events are dispatched in the DOM, it's impossible to know that the current target does have a value.
[01:31] Again, we have to teach our TypeScript and say const, we'll just use I for our input here, at event.current target is treated as an HTML input element. Then we can just log out console I .value. Then in a browser, this autofocuses. I'll bring up the console and type hi. Everything works as expected.
[01:58] Just as a note here, don't let all this extra typing and casting turn you off from TypeScript. Instead, learn the shortcuts and use the autocomplete extensively. Even though you run into this extra typing and warnings right away and you may feel less productive, all of the extra help this gives your project as it grows will make you more productive.
Hey Navneet - The way you choose will depend on your project requirements, as well as in your preferences and needs. A good starting point is checking out this resource. Hope that helps!
I'm getting an error with:
const input = document.getElementById("input") as HTMLInputElement; input.autofocus = true;
telling me that "Property 'autofocus' does not exist on type 'HTMLInputElement'.ts(2339)"
How to autocomplete jsdoc options?