Add 'as' prop to types (#846)

Add missing type for prop `as`. 

This removes the need for the workaround proposed here:
- #180

Also, it works better because the `as` prop is only available for styled
components.

types/index.d.ts

@@ -1,4 +1,4 @@
-import { ComponentType } from 'react'
+import { ComponentType, ElementType } from 'react'
 import { Config as TailwindConfig } from 'tailwindcss'
 
 export interface TwStyle {
@@ -26,7 +26,7 @@ export type ScreenFn = <T = string>(
 ) => (styles?: string | TemplateStringsArray | TwStyle | TwStyle[]) => T
 
 export type TwComponent<K extends keyof JSX.IntrinsicElements> = (
- props: JSX.IntrinsicElements[K]
+ props: JSX.IntrinsicElements[K] & { as?: ElementType }
 ) => JSX.Element
 
 export type TwComponentMap = {

types/tests/basic/index.tsx

@@ -52,3 +52,7 @@ const twProperty = (
 )
 
 const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />
+const asProperty = <Button as="div" />
+
+// @ts-expect-error basic element doesn't provide as prop
+const asPropertyError = <p as="div" />

types/tests/emotion/index.tsx

@@ -26,3 +26,6 @@ export const ComposedLink2 = styled(Link)``
 
 export const cssProperty = <div css={tw`bg-red-100`} />
 export const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />
+
+export const asProperty = <Link as="button" />
+export const asProperty2 = <Container as="button" />

types/tests/styled-components/index.tsx

@@ -22,3 +22,6 @@ export const ComposedLink2 = styled(Link)``
 
 export const cssProperty = <div css={tw`bg-red-100`} />
 export const csProperty = <div cs="maxWidth[100%] height[calc(100vh - 1em)]" />
+
+export const asProperty = <Link as="button" />
+export const asProperty2 = <Container as="button" />