Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add TypeScript definitions #40

Closed
patrick91 opened this issue Jun 28, 2017 · 9 comments
Closed

Add TypeScript definitions #40

patrick91 opened this issue Jun 28, 2017 · 9 comments

Comments

@patrick91
Copy link

I'll do this when I have some free time (probably right after #EuroPython, I have a talk to prepare :) ).

Should be pretty straightforward to port styled-components' definitions.

What are the main API differences with it?

@marvinhagemeister
Copy link

Just made a wip PR this morning. Would you be interested in collaborating?

@patrick91
Copy link
Author

Yup :) you can have a look at this in the meanwhile /~https://github.com/styled-components/styled-components/blob/master/typings/styled-components.d.ts :)

@marvinhagemeister
Copy link

@patrick91 That's awesome! Thanks for the link 👍 I managed to get the styled function to typecheck, with autocomplete for tags. But I'm currently facing an issue with React.createElement:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: object.

My guess is that this was the reason you guys went with custom component declarations for styled-components?

@tkh44
Copy link
Member

tkh44 commented Jun 28, 2017

@marvinhagemeister This is going to be tricky I think.

the signature for styled is (I don't know typescript I'm just making this syntax up as I go)

styled(tag: string|$ReactComponent, cls: string, vars: <Mixed>, content: () => {})

I think typescript is seeing a tagged template literal and expecting it to have a signature like

styled(strings: <String>, ...vars: <Mixed>)

@hawkins
Copy link
Contributor

hawkins commented Jul 7, 2017

Similarly, could we get flow definitions as well? While I'm a rookie with Flow and inexperienced with TypeScript, I would greatly appreciate the definitions in flow, so I'd be happy to try my hand at contributing that side of the equation

@thangngoc89
Copy link
Contributor

thangngoc89 commented Jul 7, 2017

@hawkins tag me in when you sent the PR. Installing flow to my new project and seeing a lot of red lines :D

P/S: Emotion is partially written in Flow /~https://github.com/tkh44/emotion/blob/0485de608c9ea7f039c78dc06788040ef009d258/src/index.js#L1

@goodmind
Copy link

any progress here?

@tkh44 tkh44 removed the enhancement label Sep 25, 2017
@renatorib
Copy link
Contributor

renatorib commented Oct 13, 2017

Hey guys, I've created a PR!

Check it out: #398

@renatorib
Copy link
Contributor

renatorib commented Oct 16, 2017

Hey @tkh44, I think you can close this issue since it's already merged and published.

@tkh44 tkh44 closed this as completed Oct 16, 2017
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

7 participants