Emotion: Type Error with TypeScript 3.8.2 and theme 🏷

[MacRayy]

Current behavior:

After updating typescript to 3.8.2 I've got an error with the theme.
If a styled component uses the theme from the props the typescripts throw an error where I import and use the styled-component.
The error tells that I don't pass the theme in the styled-component.
Error: 'theme' is declared here.

To reproduce:

1. Update TS to 3.8.2
2. Create a styled-component and use the theme from props
3. Implement the styled-component
4. Check the type error

Expected behavior:

The styled-component shouldn't expect the theme where we plan to use it.

If I make the theme here an optional parameter here the error dissolves but It creates another error because theme becomes an optional parameter.
I think the theme should be omitted in this file, maybe that would solve the issue.

Environment information:

• react version: 16.9.0
• emotion version: 10.0.27
• typescript version: 3.8.2

[dmitryplatonov]

I can confirm issue.
Issue exists: typescript 3.8.2, 3.8.1. Issue does not exist: typescript 3.7.5.
Versions:
[email protected]
[email protected]
Code to reproduce:

export default styled as CreateStyled<Theme>;

const StyledDiv = styled.div`
    background-color: ${({theme}: {theme: Theme}) => theme.colors.background};
`;

[Andarist]

Please always try to share a repro case in a runnable form - either by providing a git repository to clone or a codesandbox. OSS maintainers usually can't afford the time to set up the repro, even if exact steps are given.

[Js-Brecht]

I just ran into this, too, so I thought I would chime in with a simple reproduction:
https://github.com/Js-Brecht/emotion-theming-ts-3.8.2

Try a yarn build, and you should see the type error. Try with branch 3.7.2 (uses [email protected]), and you should see it build successfully.

EDIT: Meant to do 3.7.5, but oh well. The concept is the same.

[aaronjensen]

PR with fix here: https://github.com/emotion-js/emotion/pull/1788

If you're a patch-package user:

patches/@emotion+styled-base+10.0.28.patch

diff --git a/node_modules/@emotion/styled-base/types/index.d.ts b/node_modules/@emotion/styled-base/types/index.d.ts
index 52dfe2f..6d7bd61 100644
--- a/node_modules/@emotion/styled-base/types/index.d.ts
+++ b/node_modules/@emotion/styled-base/types/index.d.ts
@@ -39,7 +39,7 @@ export interface StyledOptions {
 }

 export interface StyledComponent<InnerProps, StyleProps, Theme extends object>
-  extends React.SFC<InnerProps & StyleProps & { theme?: Theme }>,
+  extends React.SFC<InnerProps & Omit<StyleProps, 'theme'> & { theme?: Theme }>,
     ComponentSelector {
   /**
    * @desc this method is type-unsafe

[Andarist]

Thank you @Js-Brecht for the repro - I was able to test bunch of stuff using it. And thank you @aaronjensen for the fix.

I should release the fix by the end of the weekend.