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 mongoose fails to establish a connection with the Mongo Db Atlas

Strategies for Populating Objects in Angular 2

Steps for mandating the specification of a type parameter for a generic React component

Encountering issues with @typescript-eslint/typescript-estree due to using a non-officially supported version of TypeScript after updating Nuxt

Using React with TypeScript to ensure that at least one key of a type is not null, even if all keys are optional

The Angular library files built with ng build are not automatically included in the dist folder

Using react-confetti to create numerous confetti effects simultaneously on a single webpage

What is the proper way to send a list as a parameter in a restangular post request

Tips for detecting the end of a scroll view in a list view

Encountering a bug in Typescript where a Prisma relation list field fails when provided with an argument

Issue encountered while attempting to remove a post from my Next.js application utilizing Prisma and Zod

Updating a string's value in Angular based on user input

Creating an Angular form from scratch using HTML

Ways to retrieve data beyond the constructor

Angular function for downloading table cells

Can you explain the process of utilizing Angular databinding to display nested information?

Encountering ExpressionChangedAfterItHasBeenCheckedError in Angular 17 even after invoking detectChanges method

Failing to retrieve the file instance upon completing the upload process to cloudinary using nestjs

Exploring TypeScript's Classes and Generics

The Jest worker has run into 4 child process errors, surpassing the maximum retry threshold