emoteJAM icon indicating copy to clipboard operation
emoteJAM copied to clipboard

Improve type-safety for Grecha tag

Open fnky opened this issue 4 years ago • 1 comments

This PR adds type definitions for the Tag type with interoperability with HTMLElement and types derived from it.

It introduces a IntrinsicElements interface which is a map of element names corresponding with their corresponding HTMLElement subtype. This is used as a way to provide type information inferred from the element name.

It can be further extended with minimum effort;

interface IntrinsicElements {
  // ... more intrinsic elements ...
  form: HTMLFormElement,
}

function form(action: string, url: string) {
  return tag("form").att$("action", action).att$('url', url);
}

Since tag now inters the type from element name ("form"), it returns the correct type Tag<HTMLFormElement> and no longer requires explicit return types or casting.

There is also partial support for augmenting Tag elements with custom methods ending with a dollar-sign ("$"). Although these are not type-safe and has to be managed by the user manually, since there is not an easy way to infer those types.

It does so by utilizing template literals index signature, as introduced in TypeScript 4.4. Therefore this PR also upgrades TypeScript to the latest version (4.5).

fnky avatar Jan 10 '22 02:01 fnky

https://github.com/tsoding/emoteJAM/pull/90/files#r1718035530

this is a much better solution. consider doing something like this instead

sakgoyal avatar Aug 15 '24 06:08 sakgoyal