Definitelytyped: [@types/styled-components] Property "as" does not change the element type (v4)

[martpie]

• [x] I tried using the @types/xxxx package and had problems.
• [x] I tried using the latest stable version of tsc. https://www.npmjs.com/package/typescript
• [x] I have a question that is inappropriate for StackOverflow. (Please ask any appropriate questions there).
• [x] [Mention](https://github.com/blog/821-mention-somebody-they-re-notified) the authors (see Definitions by: in index.d.ts) so they can respond.
  
  
  
  • Authors: @Igorbek @Igmat @lavoaster
  
  

---

Hello 👋

The issue is quite simple:

const Headline = styled.h2`
  font-size: 2rem;
`;

...

<Headline as='a' href='https://google.com'>Blabla</Headline> // Property 'href' does not exist on type [...]HTMLHeadmingElement[...]

But it should be considered as an HTMLAnchorElement

I think it was discussed in a previous thread (the v4 PR?) but I don't find it anymore. Let me know if I can help. but my d.ts knowledge is limited.

[Igorbek]

Hey @martpie, a short answer probably would be a suggestion to use component in as be fully substitutable with original component. This is a trade-off of using as.
A more detailed answer is that it is hard to do this correctly. Each call to interpolation and attrs effective transforms props of the source component. These operation can remove, add or replace props in inner and outer contract. Using as or withComponent effectively replaces type of very first component in the chain making nearly impossible to reapply the same set of operations, or at least very hard to do.

[martpie]

Yep, I totally understand.

Should I let this open until someone is brave enough to tackle this? Or should we close it as a Wontfix?

[Igorbek]

Sure, let's keep it open for some time :)

[Igmat]

I have to mention that it's doable - but really very tricky.
Unfortunately, I can't dedicate my time to it right now. But most probably, I'll work on this, when have a chance.

[ralexand56]

Damn, this is crappy. It's bad when your type system prevents you from using features.

[brabeji]

@Igmat I can see that some work is maybe intended here https://github.com/DefinitelyTyped/DefinitelyTyped/commit/5c49d4ddc6f5bd06c5cf04d911398f3db05ead54#diff-63673339e5cae5f0ba7101d6c5d5791eR114 - Does this look promising to you?

[dawidk92]

Are there any updates about this issue?

[fabb]

Doing this in a safe way without losing excess property checking is hard, even when leaving aside what @Igorbek wrote above, here is a very good blog post on this:
https://blog.andrewbran.ch/polymorphic-react-components/

[Igorbek]

My personal opinion is that rather as feature of styled-component is very controversial. There're many ways to do the same without having to use as attribute and properly describe the intent.

Example from the docs:

const Component = styled.div`
  color: red;
`;

render(
  <Component
    as="button" // this seems weird to me
    onClick={() => alert('It works!')}
  >
    Hello World!
  </Component>
)

// alternatively, if you just want to have abstract css defined somewhere you can do:
const componentStyle = styled.css`
  color: red
`
const Component = styled.div`${componentStyle}` // if you need this component
const ButtonComponent = styled.button`${componentStyle}`

[martpie]

Any news in the TS ecosystem which could make this feature implementation easier? I think emotion has a workaround for this. With styled-components v5 shipping soon, this would be awesome.

Igorbek solution works indeed, but can get really spaghetti if you start importing/exporting styles from many different modules.

I can also help if needed.

[martpie]

It looks like Reakit is finding a way to solve this problem (not perfect, but handle simple cases) https://github.com/reakit/reakit/blob/f6656b6b765bbec639754aa96a2f08b717413068/packages/reakit-system/src/createComponent.ts#L33-L42