Improve TypeScript support for element creation in Cash-dom

[amirfarzamnia]

Feature description

When working with Vanilla.js, TypeScript, and Webpack, I encountered an issue with creating elements in Cash-dom. In my previous setup, using plain document.createElement('img'), TypeScript was able to infer the correct type (HTMLImageElement). However, when using Cash-dom, I ran into a type error when trying to create elements like images.

Example:

Object.assign(document.createElement('img'), {
  src: 'https://example.com/example.png'
} satisfies Partial<HTMLImageElement>);

This works fine in Vanilla.js with TypeScript, but with Cash-dom, I receive the following error:

Object literal may only specify known properties, and 'src' does not exist in type 'Document | HTMLElement | Element | Cash'.ts(2353)

The issue arises because Cash-dom doesn't automatically recognize the context as an HTMLImageElement, unlike document.createElement('img'), which TypeScript correctly infers.

Proposed solution

It would be beneficial to improve TypeScript support in Cash-dom to allow automatic recognition of specific element types (like HTMLImageElement) when creating elements.

An ideal solution would be something like this:

declare const cash: {
  (selector: '<img>', context?: HTMLImageElement): Cash;
  (selector?: Selector, context?: Context | Cash): Cash;
} & CashStatic;

This would ensure that Cash-dom correctly infers the type for elements like HTMLImageElement when using methods like createElement.

Feature motivation

This enhancement would provide better TypeScript type inference and make it easier to work with Cash-dom in a TypeScript project, improving developer experience and reducing type-related errors.

Is this feature present in jQuery? No

[amirfarzamnia]

This is the code I'm using in Cash-dom:

$('<img>', {
src: 'https://example.com/example.png'
})