JS methods TO typescript

[marcialwushu]

example of HTMLElement.addEventListener in typescript?

can I get one? this is what I have, but I'm getting a red squiggly line:

let button = <HTMLElement>document.body.querySelector(".btn");
button.addEventListener("click", () =>{});//not sure what to do here.  I know its wrong though.
below is my tsonconfig

{
    "compileOnSave": true,
    "compilerOptions": {
        "noImplicitAny": true,
        "removeComments": true,
        "sourceMap": false,
        "target": "es5",
        "lib": [
            "es6",
            "dom"
        ]
    },
    "include": [ "**/*" ]
}

[marcialwushu]

With your given tsconfig.json it compiles fine:

let button = <HTMLElement>document.body.querySelector(".btn");
button.addEventListener("click", () => { });

---

The issue was ReSharper. I disabled the plugin and it worked fine. For reference I have attached two picutres, the first with ReSharper enabled, and the second with it disabled.

STACKOVERFLOW

[marcialwushu]

How to use document.getElementById() method in TypeScript?

I am trying to reset HTML Form in order to clear all the values in the input fields using;

document.getElementById('myForm').reset(); 

But I can use that in typescript, it's giving me an error saying document.getElementById('myForm') may be null

How can I solve this issue?

[marcialwushu]

Typescript will force you to check the value is not null if you use the strictNullChecks option (or strict which includes strictNullChecks). You can either perform the test or use a not null assertion (!). Also you will need to use a type assertion to assert the html element is an HTMLFormElement as by default it will be just an HtmlElement and reset is present only HTMLFormElement

Just an assertion Assertion:

(document.getElementById('myForm') as HTMLFormElement).reset();

Assertion with check (recommended):

let form = document.getElementById('myForm')
if(form) (form as HTMLFormElement).reset(); 

Not null assertion (if you want to access just HtmlElement member):

document.getElementById('myForm')!.click()

[marcialwushu]

There are different fixes for this. You can edit your tsconfig.json and add

"strictNullChecks": false

to it. This will disable the strict null checks.

If you are absolutely sure that the element exists, you could also use ! to tell typescript that your id will always be there

document.getElementById('myForm')!.reset(); 

Or if you want to make sure to never get an error because the element indeed doesn't exist, check for its existance

const el = document.getElementById('myForm');
if (el) el.reset();

---

document.getElementById('myForm')! this will pass the null error but later if i add .reset() then it says[ts] Property 'reset' does not exist on type 'HTMLElement'. any

---

Try a check on the element. Something like:

var myForm = document.getElementById('myForm');
if(myForm) myForm.reset();

[marcialwushu]

https://www.tutorialsteacher.com/typescript/converting-javascript-to-typescript