Props don't work anymore with TypeScript 3.4.1

• 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.

[skovhus]

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

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

[Dudeonyx]

Solution:

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

✌️