Typescript -extend interface Node=HTMLElement

Question

I am using Cypress 10.
I have seen this code:

 Cypress.Commands.add(
  'byTestId',
  // Borrow the signature from cy.get
  <E extends Node = HTMLElement>(
    id: string,
    options?: Partial<
      Cypress.Loggable & Cypress.Timeoutable & Cypress.Withinable & Cypress.Shadow
    >,
  ): Cypress.Chainable<JQuery<E>> =
    cy.get(`[data-testid="${id}"]`, options),
);

What does the E extends Node = HTMLElement means exactly? and can it be replaced by E extends HTMLElement
Is there a difference in these two?

`E` is a generic parameter that defaults to `HTMLElement` if it cannot be inferred. — kelsny, Nov 07 '22 at 15:13
@caTS Thanks, can you please put it as a comment so I can accept the answer — mismas, Nov 07 '22 at 15:17

score 1 · Accepted Answer · answered Nov 07 '22 at 15:31

E extends Node = HTMLElement is a generic type parameter with a constraint of Node, and if it can't be inferred by the TypeScript compiler, it will default to HTMLElement.

For Node vs HTMLElement, you may want to see this question:

A node is the generic name for any type of object in the DOM hierarchy. A node could be one of the built-in DOM elements such as document or document.body, it could be an HTML tag specified in the HTML such as <input> or <p> or it could be a text node that is created by the system to hold a block of text inside another element. So, in a nutshell, a node is any DOM object.

An element is one specific type of node as there are many other types of nodes (text nodes, comment nodes, document nodes, etc...).

Typescript -extend interface Node=HTMLElement

1 Answers1