Props don't work anymore with TypeScript 3.4.1

[screendriver]

• emotion version: 10.0.10
• react version: 16.8.6

Relevant code:

const Container = styled.div((props: { test: number }) => ({
  width: props.test,
}));

What you did:

Updated TypeScript to the latest version 3.4.1

What happened:

error TS2345: Argument of type '(props: { test: number; }) => { width: number; }' is not assignable to parameter of type 'TemplateStringsArray'.
  Type '(props: { test: number; }) => { width: number; }' is missing the following properties from type 'TemplateStringsArray': raw, concat, join, slice, and 16 more.

Reproduction:

Just create a fresh empty project with TypeScript and emotion and paste my code above into it. I can do that for you if you want, but it's so simple to reproduce that I thought it is not necessary.

Problem description:

Does not compile anymore. With the TypeScript version before (3.3.4000) it worked.

Suggested solution:

Fix TypeScript definition.

[Dudeonyx]

Solution:

const Container = styled.div<{ test: number }>((props) => ({
  width: props.test,
}));

✌️

[skovhus]

And with the other syntax styled('div'), you can do:

styled('div')<{ test: number }>`...`

[ndelangen]

I'm finding I have to add <{}> is lots of places in order to make typescript happy again after upgrading.

const Container = styled.div<{}>(({ theme }) => ({
  width: theme.width,
}));

[Andarist]

@ndelangen could you check which version exactly has started to "fail" for you? I could try to locate the commit which has introduced the change then and try to assess if something is wrong or is it expected.

[ndelangen]

@Andarist, thanks for helping. Super appreciated!

I was in a terrible situation with yarn.lock being semi-corrupt.

I ended up having to remove it and re-generate it.

I went from version "10.0.10" to version "10.0.14", whilst my dependency in package.json being: "@emotion/core@^10.0.9"

In case it helps: (fair warning it's a HUGE PR, with loads of changes)
storybookjs/storybook#7329

typescript version "3.5.2"

[EddyVinck]

I was getting this error:
Property 'theme' is missing in type '{ children: (string | Element)[]; color: string; }' but required in type '{ theme: Theme; }'. on an Emotion styled('h1').
Updating my Emotion dependencies fixed the issue:

// package.json
{
  "dependencies": {
    "@emotion/core": "^10.0.16",
    "@emotion/styled": "^10.0.15",
    "emotion-theming": "^10.0.14"
  },
  "devDependencies": {
    "babel-plugin-emotion": "^10.0.16",
    "typescript": "^3.5.3"
  }
}

[Andarist]

@JakeGinnivan could you check how your PR affects this issue?

[JakeGinnivan]

Just added the above as a test, works fine in #1501

The workaround solution also still works. Pushed the additional tests too

[Andarist]

Thanks for checking! Closing this issue because #1501 is intended to fix it.