Open yunarch opened 2 weeks ago
Just an update for the easy solution, as what i wrote it was just the general idea but in terms of code if you copy paste will not work. Is not possible to extend from both HTMLAttributes<HTMLElement>
and AnchorHTMLAttributes<HTMLAnchorElement>
at the same time as there is properties with the same name but not identically on the type def.
A solution for that could be:
export interface TypographyProps
extends HTMLAttributes<HTMLElement>,
Omit<
AnchorHTMLAttributes<HTMLAnchorElement>,
keyof HTMLAttributes<HTMLElement>
> {
/** Typography variants, specifies which variant to use. */
variant?: TypographyVariants;
/** Typography groups, specifies which group to use. */
group?: TypographyGroups;
/** Bold text. */
bold?: boolean;
/** Italic text. */
italic?: boolean;
/** Link. */
link?: boolean;
/** Typography colors. */
color?: ColorVariants | string;
/** Token. */
token?: Partial<TypographyType>;
/** Number of lines. */
lines?: number;
}
I'm omiting the props from AnchorHTMLAttributes<HTMLAnchorElement>
that their key is already on HTMLAttributes<HTMLElement>
because your forwardRef
is based on HTMLElement
but you will still have autocomplete for props like rel
or href
.
Describe the bug
The
TypographyProps
definition is causing type extension issues due to its implementation as a type union of HTML node types, specificallyHTMLElement
andHTMLAnchorElement
. This use of a type union introduces inconsistency at the type level, which is particularly evident when attempting to extendTypographyProps
with an interface.Attempted interface extension results in the TypeScript error:
I understand the goal, which is to achieve type safety for attributes such as
href
orrel
related toHTMLAnchorElement
. But there is a mix between type definitions and the usage of styled-componentsas
property. This application creates a dichotomy at the type level that's not visually apparent, and it intermingles capabilities of styled-components without aligning them properly with the type definitions.type
orinterface
, it should not be forced to use one or another.styled-components
, which allows to change dynamically the component HTML node element, it should also offers typesafety around that node. I should not have all the attributes no matter the html node i decide to use as that will bring a lot of confusion.Steps to reproduce the bug
Expected behavior
I should at least be able to extend the
TypographyProps
using interface.Ideal solution, if i use
as="a"
then i will have autocomplete for the properties that are for an anchor element.Possible solutions
An easy fix to allow extensions of the
TypographyProps
unsing interfaces is to instead of using type change it to interface which will force you to have double extension instead of a type union:A "more" correct fix as it will add inference arround the render engine (styled-components) is to allow autocomplete based on the
as
propert. A way to achive it is to create a wrapper around theforwardRef
which will infer the types based on theas
property.A possible implementation, is just an example I think is quite correct but im using some deprecated types, but to test the idea should be good (Also keep in mind react 19 will remove the need for forwardRef, which then this code will need some refactor):
Usage:
Now You should have autocomplete for
href
only if you useas="a"