Added basic TS type support for as prop on styled components (#1874)

* Add type for as prop * Add changeset * Simplify type for `as` prop * Tweak changeset Co-authored-by: Mateusz Burzyński <mateuszburzynski@gmail.com>
emotion-js · Jul 9, 2020 · 4d3b60d · 4d3b60d
1 parent 6d32d82
commit 4d3b60d
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 4 deletions.
diff --git a/.changeset/cyan-jobs-carry.md b/.changeset/cyan-jobs-carry.md
@@ -0,0 +1,5 @@
+---
+'@emotion/styled': minor
+---
+
+Added basic TS type support for `as` prop on styled components. It's possible to pass any component to it but it has no effect on other accepted props. This means that it's not 100% type-safe so use it sparingly and with care.
diff --git a/packages/styled/types/base.d.ts b/packages/styled/types/base.d.ts
@@ -106,12 +106,22 @@ export interface CreateStyled {
   >(
     component: C,
     options: FilteringStyledOptions<PropsOf<C>, ForwardedProps>
-  ): CreateStyledComponent<Pick<PropsOf<C>, ForwardedProps> & { theme?: Theme }>
+  ): CreateStyledComponent<
+    Pick<PropsOf<C>, ForwardedProps> & {
+      theme?: Theme
+      as?: React.ElementType
+    }
+  >
 
   <C extends React.ComponentType<React.ComponentProps<C>>>(
     component: C,
     options?: StyledOptions<PropsOf<C>>
-  ): CreateStyledComponent<PropsOf<C> & { theme?: Theme }>
+  ): CreateStyledComponent<
+    PropsOf<C> & {
+      theme?: Theme
+      as?: React.ElementType
+    }
+  >
 
   <
     Tag extends keyof JSX.IntrinsicElements,
@@ -120,14 +130,17 @@ export interface CreateStyled {
     tag: Tag,
     options: FilteringStyledOptions<JSX.IntrinsicElements[Tag], ForwardedProps>
   ): CreateStyledComponent<
-    { theme?: Theme },
+    { theme?: Theme; as?: React.ElementType },
     Pick<JSX.IntrinsicElements[Tag], ForwardedProps>
   >
 
   <Tag extends keyof JSX.IntrinsicElements>(
     tag: Tag,
     options?: StyledOptions<JSX.IntrinsicElements[Tag]>
-  ): CreateStyledComponent<{ theme?: Theme }, JSX.IntrinsicElements[Tag]>
+  ): CreateStyledComponent<
+    { theme?: Theme; as?: React.ElementType },
+    JSX.IntrinsicElements[Tag]
+  >
 }
 
 declare const styled: CreateStyled

diff --git a/packages/styled/types/tests-base.tsx b/packages/styled/types/tests-base.tsx
@@ -423,3 +423,12 @@ const StyledButton = StyledDiv.withComponent('button')
     e
   }}
 />
+
+const StyledWithAs = styled('div')`
+  display: flex;
+`
+const Section = styled('section')`
+  color: hotpink;
+`
+;<StyledWithAs as="section" />
+;<StyledWithAs as={Section} />