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");

VScode tells me getMatch is of type Element when I hover it. You can write public getMatch:Element; — Jeremy Thille
– Jeremy Thille, Commented Dec 28, 2021 at 14:58
check this out: stackoverflow.com/questions/43032004/queryselector-in- typescript , you can cast it as HTMLInputElement — Nick Gr
– Nick Gr, Commented Dec 28, 2021 at 15:00
According to .querySelector() MDN docs, method returns the first Element within the document that matches the specified selector, or group of selectors. So you can declare getMatch type: public getMatch: Element — Xeelley
– Xeelley, Commented Dec 28, 2021 at 15:03

matt helliwell · Accepted Answer · 2021-12-28 15:58:16Z

3

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");

answered Dec 28, 2021 at 15:58

matt helliwell

2,69619 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Nicola Scionti · Accepted Answer · 2021-12-28 15:37:05Z

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");

edited Dec 28, 2021 at 15:37

answered Dec 28, 2021 at 14:59

Nicola Scionti

5462 silver badges15 bronze badges

Collectives™ on Stack Overflow

How to define data type for queryselector in typescript

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related