Update typescript document to match with current types #679

Ailrun · 2018-05-26T01:46:39Z

What: Update typescript document

Why: Typings are changed, so document is outdated.

Checklist:

Documentation
[N/A] Tests
[N/A] Code complete

This document depends on #678 and #680, so please do not merge this before them.

emmatown

Thanks for this!!

Could you move the create-emotion and create-emotion-styled parts to the bottom and move the parts about type checking objects into the emotion section since the vast majority of users will only use emotion and react-emotion so they shouldn't have to care about create-emotion and create-emotion-styled?

emmatown · 2018-05-26T01:59:09Z

docs/typescript.md

+`;
+```
+
+Typescript checks css properties in object style syntax using csstype package, so following code will emit errors.


Could you remove the bit about using csstype since it's an implementation detail and people don't need to know about it.

But it would be helpful when users meet some type issues.... wouldn't it?

Yeah, makes sense, could you make it a link to the project as well then?

Oh... you're right. I will add the link too.

emmatown · 2018-05-26T02:01:29Z

docs/typescript.md

+
+## create-emotion-styled
+
+Current typing for `create-emotion-styled` is only compatible with React, and will not work with Preact. For detail typing, see following `react-element` section.


Could you change "Current typing for create-emotion-styled is only" to "The current typings for create-emotion-styled are only"?

OK. Thank you for your review!

emmatown · 2018-05-26T02:06:05Z

docs/typescript.md

@@ -2,9 +2,77 @@
 title: "Typescript"
 ---

-Emotion includes TypeScript definitions for `styled` components and has type inferences for both html elements and React components.
+Emotion includes TypeScript definitions for `create-emotion`, `emotion`, `create-emotion-styled`, and `react-emotion` packages. These definition also could infer types for css property (with object syntax), and HTML/SVG tag name, and props types.


Is there a circumstance where it can't infer types for css properties?
If not, could you replace "These definition also could infer types for css property" with "These definitions also infer types for css properties"?

Also, could you replace "HTML/SVG tag name" with "HTML/SVG tag names"?

Allright. I will change them.

emmatown · 2018-05-28T22:15:45Z

docs/typescript.md

+
+## preact-emotion
+
+Types are almost same with `react-emotion` package.


If they're almost the same and not the exact same, could you explain how they're different?

OK. I will add following.

However, this typing use Preact component types like ComponentConstructor and FunctionalComponent instead of React component types.

Is this enough?

emmatown · 2018-05-28T22:16:32Z

docs/typescript.md

+
+## create-emotion-styled
+
+The current typings for `create-emotion-styled` are only compatible with React, and will not work with Preact. For detail typing, see `react-element` section above.


This isn't true anymore about not supporting Preact, right?

No, it still does not work with Preact, since we only have preact-emotion typing with Preact, and does not have create-emotion-styled typing with Preact.

FYI, Preact and React both modifies JSX.Element, so we cannot import both typings in one file. That's why I did not provide typing for preact version of create-emotion-styled. (Its index typing file already import React typing)

The only way I can image, to deal with the problem, is, providing index typing without import any (P)React related typings and making users import them.

However, this may confuse users, because it will not work properly when users do not import (P)React related typings.

emmatown · 2018-05-28T22:17:28Z

docs/typescript.md

 ### Define a Theme

 By default, the `props.theme` has `any` type annotation and works without error.\
 However, you can define a theme type by creating a another `styled` instance.

-_styled.tsx_
+_styled.jsx_


Why the change in extension, isn't tsx generally used?

Oh, my mistake. Sorry. I will change these.

SpaceK33z · 2018-05-29T09:13:16Z

docs/typescript.md

-const Image = styled<ImageProps, 'div'>('div')`
-  background: url(${props => props.src}) center center;
+const Image0 = styled('div')`
+  width: ${(props: ImageProps) => props.width};


Why are you using width: ${(props: ImageProps) instead of typing the component with styled<ImageProps>('div')? This is a bit confusing for me, since I see the latter as a much clearer way to type your component.

Because in (will-be-)updated typings, there're no type parameters Props for styled.

In TS 2.9 (which is in RC), you can use template string generic, however, before it, you should give a type to function argument and let TS infer correct type for component.

Why? Typing every prop function with ${(props: ImageProps) is more work, right? The redundant div in styled<ImageProps, 'div'> is a bit frustrating, but it will not be necessary anymore as soon as TypeScript 2.9 is released.

In 2.9, you also don't need to type every function with new typings, since, as I said, you can use template string generic.
Before 2.9 with old typings, you should type <..., 'div'>, and sometimes even more complex things in second type parameter, and it could make really hard to type complex and large app.

The problem what you mentioned occurs only when you use more than two function arguments, and as far as I experienced, it's not that common... (Of course, this is totally my subjective opinion)

what you mentioned occurs only when you use more than two function argument, and as far as I experienced, it's not that common

In my experience I have a lot of these functions, if you are building a component library you can easily have ten of those prop functions. But if this isn't relevant anymore with TS 2.9 I digress.

Maybe my opinion is from my object syntax based experience. Even when I made a library, I rarely used more than two function arguments.
(Just one or two functions those return proper object styles)

And, thank you for your feedback!

…n't used

felipeleusin · 2018-06-13T12:46:24Z

Hi folks,

I just hit an issue. I have a button component that uses custom props but fallsback to theme props. But if I use

(props: ButtonProps) => whatever

I lose typing to Themed. I've been trying to get this to work and failing. Do you have any pointers? Should I make something Themed for this cases? Maybe it's a good thing to add in the docs

Ailrun · 2018-06-13T12:49:02Z

@felipeleusin If you use TS >= 2.9, you can use something like

styled('div')<ButtonProps>`
  ${props => something}
`;

felipeleusin · 2018-06-13T12:51:56Z

Oh, ok! Will try this. Thanks a lot!

Ailrun · 2018-06-13T12:53:48Z

I should add that to the document...

felipeleusin · 2018-06-13T14:34:35Z

I can add a PR for that, was just checking it's working first :)

Ailrun · 2018-06-13T14:36:57Z

@felipeleusin Oh, I'm not start yet. Currently I'm discussing about typing in #721.

emmatown reviewed May 26, 2018

View reviewed changes

Ailrun force-pushed the docs/typescript branch 2 times, most recently from ef53d27 to d02f84e Compare May 26, 2018 07:14

emmatown reviewed May 28, 2018

View reviewed changes

Ailrun mentioned this pull request May 29, 2018

Fix incorrect code and a type in TypeScript docs #683

Closed

SpaceK33z reviewed May 29, 2018

View reviewed changes

Ailrun and others added 6 commits June 5, 2018 13:41

Update typescript document to match with current types

5b3f02f

Fix typo and wrong grammar in typescript doc

2b3c84c

Add preact-emotion to typescript document

06e68b7

Fix error in string syntax and remove some code in an example that is…

1722364

…n't used

Fix wrong extensions

14da095

Add difference between typings of react and preact emotion

9e20b6a

Ailrun force-pushed the docs/typescript branch from aeed7c6 to 9e20b6a Compare June 5, 2018 17:41

emmatown added 4 commits June 7, 2018 17:48

Update typescript.md

f27978f

Update typescript.md

34c8e56

Update highlight-css.js

e14b4b9

Update typescript.md

553fba2

emmatown added the Tag: Documentation label Jun 7, 2018

emmatown added 2 commits June 7, 2018 18:20

Update typescript.md

3f9272d

Merge branch 'master' into docs/typescript

ea5a1f3

emmatown approved these changes Jun 7, 2018

View reviewed changes

emmatown added 2 commits June 7, 2018 19:12

Merge branch 'master' into docs/typescript

ee9914d

Update typescript.md

e8ce730

emmatown merged commit 12281c1 into emotion-js:master Jun 7, 2018

This was referenced Jun 7, 2018

Update TypeScript example for styling React component #697

Closed

TypeScript example is broken in documentation #696

Closed

nicolaslohrer mentioned this pull request Jul 3, 2018

IntelliSense doesn't work with emotion-style TypeScript declarations microsoft/typescript-styled-plugin#56

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Update typescript document to match with current types #679

Update typescript document to match with current types #679

Ailrun commented May 26, 2018 •

edited

Loading

emmatown left a comment

emmatown May 26, 2018

Ailrun May 26, 2018

emmatown May 26, 2018

Ailrun May 26, 2018

emmatown May 26, 2018 •

edited

Loading

Ailrun May 26, 2018

emmatown May 26, 2018

Ailrun May 26, 2018

emmatown May 28, 2018

Ailrun May 28, 2018

emmatown May 28, 2018

Ailrun May 28, 2018

Ailrun May 28, 2018 •

edited

Loading

Ailrun May 28, 2018

emmatown May 28, 2018

Ailrun May 28, 2018

SpaceK33z May 29, 2018

Ailrun May 29, 2018 •

edited

Loading

Ailrun May 29, 2018 •

edited

Loading

SpaceK33z May 29, 2018

Ailrun May 29, 2018 •

edited

Loading

SpaceK33z May 29, 2018

Ailrun May 29, 2018 •

edited

Loading

Ailrun May 29, 2018

felipeleusin commented Jun 13, 2018

Ailrun commented Jun 13, 2018 •

edited

Loading

felipeleusin commented Jun 13, 2018

Ailrun commented Jun 13, 2018

felipeleusin commented Jun 13, 2018

Ailrun commented Jun 13, 2018 •

edited

Loading


		## create-emotion-styled

		Current typing for `create-emotion-styled` is only compatible with React, and will not work with Preact. For detail typing, see following `react-element` section.


		## preact-emotion

		Types are almost same with `react-emotion` package.


		## create-emotion-styled

		The current typings for `create-emotion-styled` are only compatible with React, and will not work with Preact. For detail typing, see `react-element` section above.

Update typescript document to match with current types #679

Update typescript document to match with current types #679

Conversation

Ailrun commented May 26, 2018 • edited Loading

emmatown left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

emmatown May 26, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ailrun May 28, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ailrun May 29, 2018 • edited Loading

Choose a reason for hiding this comment

Ailrun May 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ailrun May 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Ailrun May 29, 2018 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

felipeleusin commented Jun 13, 2018

Ailrun commented Jun 13, 2018 • edited Loading

felipeleusin commented Jun 13, 2018

Ailrun commented Jun 13, 2018

felipeleusin commented Jun 13, 2018

Ailrun commented Jun 13, 2018 • edited Loading

Ailrun commented May 26, 2018 •

edited

Loading

emmatown May 26, 2018 •

edited

Loading

Ailrun May 28, 2018 •

edited

Loading

Ailrun May 29, 2018 •

edited

Loading

Ailrun May 29, 2018 •

edited

Loading

Ailrun May 29, 2018 •

edited

Loading

Ailrun May 29, 2018 •

edited

Loading

Ailrun commented Jun 13, 2018 •

edited

Loading

Ailrun commented Jun 13, 2018 •

edited

Loading