Add types to react-emotion

[renatorib]

What:
TypeScript declarations for react-emotion package

Why:
Support people who use TypeScript and need typings.

How:

• Created react-emotion.d.ts and linked in "types" package.json field
• Followed same structure/names from Added TypeScript types and tests for the emotion package. #379

Checklist:

• Documentation
• Tests
• Code complete

---

Supports

Props Inference by Tag Name:

---

Supports template string and object as styles:

---

Passing Custom Props:

Note1: needs a second type parameter passing tag name because it stop to infer when you pass props at first parameter
Note2: glamorous do not support custom props with shorthands, like Link2 😛. It was a little tricky, but works...

---

Create styled with another component:

---

Pass custom props to style another component:

Note3: as well as Note1 it's not infer 'MyComponent's Props' when you pass props as first type parameter, so you need to pass 'MyComponent' props together

type Props = MyNewProps & MyComponentProps

---

Theming props:

By default props.theme is any, but you can create another styled instance passing theme props.
Basically the same approach from styled-components

---

withComponent:

Also works passing another component instead of tag name

[luke-john]

For glamorous we've added declaration: true to help make sure we're exporting everything required for use in libraries microsoft/TypeScript#5938.

[renatorib]

Done! Added.
No warnings
😄

[luke-john]

Awesome work doing these types. They're looking great 👍 .

[emmatown]

I don't know much about typescript but I don't think this handles the fact that there can be nested function interpolations and they will receive props.

const SomeComponent = styled.div`
  display: ${(p) => props => props.display};
  color: ${[props => 'hotpink']};
`

[renatorib]

It works on emotion?
props => props_ => ...

It doesn't make any sense to me. What's this use case for?

[renatorib]

I don't know exactly all edge cases of emotion API. I'll try to study it to improve the coverage support.

[renatorib]

@mitchellhamilton I've added support to these two cases you mentioned.

export type InterpolationFn<Props = {}> =
  (props: Props) =>
    | EmotionInterpolation
    | InterpolationFn<Props>

export type InterpolationTypes<Props = {}> =
  | InterpolationFn<Props>
  | EmotionInterpolation

export type Interpolation<Props = {}> =
  | InterpolationTypes<Props>
  | InterpolationTypes<Props>[]

If you know more cases, just tell me, please.

[screendriver]

But you still need Babel in the build pipeline as I already asked here #163?

[renatorib]

@screendriver This is only typings, do not deal with build, or any emotion code. I don't even know the internals of emotion yet.

[screendriver]

Ah ok. But TypeScript definitions for emotion are a little but useless when you can't use emotion without Babel 😉 (emotion only works as Babel plugin so Babel is mandatory)

Apart from that: thank you for the typings 😎👍

[renatorib]

If you don't want to use babel (or can't) just don't use emotion. Pick another one: styled-components, glamor/ous, fela, etc.

Anyway, this is another issue. Don't have any relation with typescript or this pull request.

[renatorib]

Someone can help me with documentation? I think it's the only thing missing to this pr.

My suggestion is to write a section "TypeScript" in emotion website, but you are creating a new website, right? @tkh44

[tkh44]

@renatorib any new markdown file in the /docs folder is added to the website. Just add a new file there called typescript.md and do your thing 👍

[renatorib]

That's great! I'll try to write something. :)

[adamseckel]

This is awesome, I just started using typescript as a replacement for PropTypes, and this will go nicely with that 👌 Thanks @renatorib

[screendriver]

If you don't want to use babel (or can't) just don't use emotion. Pick another one: styled-components, glamor/ous, fela, etc.

I am not complaining about that. It is much more a question how to use emotion with TypeScript 😉 Because you found obviously a way that I am not aware of at the moment and I really want to use emotion as well. Great work 👍

[renatorib]

For now I'm 'blocked' from using emotion in my company codebase because we use TypeScript and emotion don't have typings.
So I sent a PR so I (and all of us) can use it with TypeScript.

If you really needs use emotion and can't use Babel, you can:

1. Sent a PR that makes emotion shorthands work without babel, so we can work together in that.
2. Use it without babel, abdicating the shorthands feature (using styled('div')).

You also can use Babel and TypeScript together, I guess.

Btw,
I still think we should not be talking about it here. This has no connection to the PR thread.

And thanks for the compliment.

[tkh44]

@renatorib Is this ready except for documentation?

[renatorib]

@tkh44 yep!

I did not have free time to write it yet, but it's the only thing missing.

[renatorib]

Btw, If you want, you can merge it and I send another PR with documentation.

[renatorib]

I've added a typescript documentation

Unfortunately my english is not as good as I wish it were. 😢
Someone please give a review so nothing's going wrong 😄

Thanks!

[tkh44]

Great work @renatorib! I did a quick edit but I'd like someone who knows more about typescript do a review.

[renatorib]

Looks great @tkh44, thanks!