How to define data type for queryselector in typescript

Question

I am trying to define the data type for query selector in typescript, But I do not know how to define it. I have defined any. But any is not a good way. So, How to define the data type for query selector.

test.ts:

public getMatch:any;
public readyCont:any;

this.getMatch = document.querySelector("#exampleId");
this.readyCont = this.getMatch.shadowRoot.querySelector("#matchId");

Answer 1

querySelector() returns an HTMLElement or null if he can't find it.

public getMatch: HTMLElement | null;
public readyCont: HTMLElement | null;

this.getMatch = document.querySelector("#exampleId");
this.readyCont = this.getMatch.shadowRoot.querySelector("#matchId");

Answer 2

querySelector is a generic function. If you don't pass a type into it then it returns an Element . Assuming you are querying an HTML document and not anything with SVG elements in it then it is safe to assume that it returns an HTMLElement . You can pass this type into the function so you can do:

public getMatch:HTMLElement
this.getMatch = document.querySelector<HTMLElement>("#exampleId");

However if you know the type of element you are querying then you can be a bit more specific, eg

public getMatch:HTMLInputElement
this.getMatch = document.querySelector<HTMLInputElement>("#exampleId");

Answer 3

querySelector() returns an HTML element. The type of HTML element depends on what you are querying.

In typescript, you can declare it as HTMLElement .