TypeScript causing issues when multiple selectors are used

Question

TypeScript causing issues when multiple selectors are used

Currently, I have a function that allows me to search for HTML elements based on text content:

function findElementsByText(text: string): HTMLElement[] {
  const selectors = 'button'
  // This conditional statement ensures that an empty text query doesn't match all elements on the page
  const pattern = new RegExp(text === '' ? '^$' : text)

  return Array.from(document.querySelectorAll(selectors)).filter(
    (element) => element.innerText.match(pattern)
  )
}

I decided to broaden the search by incorporating anchor tags into the selection criteria:

  const selectors = 'a, button'

However, this modification triggered a TypeScript error:

The error message states: 'Type 'Element[]' is not assignable to type 'HTMLElement[]'. Type 'Element' is missing various properties from type 'HTMLElement': accessKey, accessKeyLabel, autocapitalize, dir, and more.

Why did including another selector cause this issue, and what steps can be taken to resolve it?

To examine the live code example, please refer to the following link:

https://codesandbox.io/s/typescript-selectors-yhu1j1?fontsize=14&hidenavigation=1&theme=dark

typescript

Answer 1

Answer №1

TypeScript's intelligence allows it to identify that the string "button" will result in a NodeList of HTMLButtonElements elements (you can confirm this by hovering over querySelectorAll in the provided link).

Below is the type definition for this behavior:

querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

"button" and "a" are both included in HTMLElementTagNameMap...

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;

...which means the first definition matches and returns NodeListOf<HTMLElementTagNameMap[K]>

If you change the selector to something more complex, it won't match anything because it compares the entire string and cannot parse it at that point. This results in falling back to the last definition which returns NodeListOf<E> where E is defined as extending Element.

As the elements may come from a non-HTML source, they cannot be HTMLElement, hence the error.

A simple workaround is using a generic type to override this:

querySelectorAll<HTMLElement>(selectors)

Answer 2

TypeScript's intelligence allows it to identify that the string "button" will result in a NodeList of HTMLButtonElements elements (you can confirm this by hovering over querySelectorAll in the provided link).

Below is the type definition for this behavior:

querySelectorAll<K extends keyof HTMLElementTagNameMap>(selectors: K): NodeListOf<HTMLElementTagNameMap[K]>;
querySelectorAll<K extends keyof SVGElementTagNameMap>(selectors: K): NodeListOf<SVGElementTagNameMap[K]>;
querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

"button" and "a" are both included in HTMLElementTagNameMap...

interface HTMLElementTagNameMap {
    "a": HTMLAnchorElement;
    "abbr": HTMLElement;

...which means the first definition matches and returns NodeListOf<HTMLElementTagNameMap[K]>

If you change the selector to something more complex, it won't match anything because it compares the entire string and cannot parse it at that point. This results in falling back to the last definition which returns NodeListOf<E> where E is defined as extending Element.

As the elements may come from a non-HTML source, they cannot be HTMLElement, hence the error.

A simple workaround is using a generic type to override this:

querySelectorAll<HTMLElement>(selectors)

Answer 3

Answer №2

Your implementation was successful because the querySelector method has an overload that returns a list of HTMLButtonElement

function findElementsByText(text: string): HTMLElement[] {
  const selectors = 'button'
  // to avoid matching all elements on the page when `text` is empty
  const pattern = new RegExp(text === '' ? '^$' : text)

  return Array.from(document.querySelectorAll(selectors)).filter(
    (element) => element.innerText.match(pattern)
  )
}

If your selector contains more than one tag name, you should use as HTMLElement[] or provide a generic type

function findElementsByText2(text: string): HTMLElement[] {
  const selectors = 'button, a'
  // to avoid matching all elements on the page when `text` is empty
  const pattern = new RegExp(text === '' ? '^$' : text)

  return Array.from(document.querySelectorAll<HTMLElement>(selectors)).filter(
    (element) => element.innerText.match(pattern)
  )
}

Answer 4

Your implementation was successful because the querySelector method has an overload that returns a list of HTMLButtonElement

function findElementsByText(text: string): HTMLElement[] {
  const selectors = 'button'
  // to avoid matching all elements on the page when `text` is empty
  const pattern = new RegExp(text === '' ? '^$' : text)

  return Array.from(document.querySelectorAll(selectors)).filter(
    (element) => element.innerText.match(pattern)
  )
}

If your selector contains more than one tag name, you should use as HTMLElement[] or provide a generic type

function findElementsByText2(text: string): HTMLElement[] {
  const selectors = 'button, a'
  // to avoid matching all elements on the page when `text` is empty
  const pattern = new RegExp(text === '' ? '^$' : text)

  return Array.from(document.querySelectorAll<HTMLElement>(selectors)).filter(
    (element) => element.innerText.match(pattern)
  )
}

TypeScript causing issues when multiple selectors are used

Answer №1

Answer №2

Similar questions

The mat-slide-toggle component does not recognize the checked binding

How to effectively handle null in Typescript when accessing types with index signatures unsafely

What is the reason TypeScript does not display an error when assigning a primitive string to an object String?

Is there a way to make the Sweetalert2 alert appear just one time?

Error TS2322: Cannot assign type 'Foo | Bar' to type 'Foo & Bar'

Flow error: Unable to access the value of this.props.width as the property width is not defined in T

Error Encountered: Angular 2 ngOnInit Method Being Executed Twice

Angular 2 integration for Oauth 2 popup authorization

angular-bootstrap-mdindex.ts is not included in the compilation result

Is there a way to expand the return type of a parent class's methods using an object

Looking for guidance on locating Typescript type definitions?

How to access parent slider variables in an Angular component

Updating non-data properties dynamically in a custom AG Grid cell renderer

Ensuring consistency between TypeScript .d.ts and .js files

Transforming seconds into years, months, weeks, days, hours, minutes, and seconds

Tips for accessing an item from a separate TypeScript document (knockout.js)

Showing off the latest products at the top of the list

The retrieval of cookies from the Response object is not possible with Typescript

Sharing methods between two components on the same page in Angular can greatly improve code efficiency

Dynamic TypeScript property that can only be assigned values from an array during runtime