feat: add typescript definitions #263

satya164 · 2018-10-17T22:35:10Z

I've never used typescript, so not sure if it's correct. But would be a good starting point if someone wants to help with typescript definitions.

fixes #197

callstack-bot · 2018-10-17T22:37:19Z

Hey @satya164, thank you for your pull request 🤗.
The coverage report for this branch can be viewed here.

satya164 · 2018-10-17T22:48:11Z

index.d.ts

+  type StyledTag<T> = (strings: string[], ...exprs: Array<string | number | object | InterpolationFunction<T>>) => StyledComponent<T>;
+
+  export const styled: {
+    <T>(component: T): StyledTag<React.ElementConfig<T>>,


Here I want to return different types based on the type of T, i.e. if T is string, StyledTag<{ children?: React.Node, [key: string]: any }>, otherwise StyledTag<React.ElementConfig<T>>

satya164 · 2018-10-17T22:49:27Z

index.d.ts

+
+  export const styled: {
+    <T>(component: T): StyledTag<React.ElementConfig<T>>,
+    [tag: string]: StyledTag<{ children?: React.Node, [key: string]: any }>,


Here instead of a generic one, probably will be better if I could do something like:

div: StyledTag<JSX.InstrinsicElements.div>

But instead of having to do it for every tag, could I do it programmatically somehow? Like if this was Flow, I could do:

$ObjMap<JSX.InstrinsicElements, <T>(props: T) => StyledTag<T>>;

Esemesek · 2018-10-18T15:36:49Z

index.d.ts

+import * as React from 'react';
+
+declare module "./index" {
+  export const css: (strings: string[], ...exprs: Array<string | number | object>) => string;


Be consistent. Choose between string[] and Array<string>

@Esemesek can't man, it's union type

@satya164 You can probably use (string | number | object)[]

thymikee · 2018-10-18T19:38:57Z

typings/index.d.ts

+  ) => string;
+
+  export const cx: (
+    ...classNames: Array<string | false | undefined | null | 0>


Is 0 something special or can be replaced by number?

It accepts strings or falsy values. That's why 0 is here, çoz it's falsy.

Maybe you should extract to separate type to keep in semantically clean.

Esemesek · 2018-10-18T20:25:37Z

typings/__fixtures__/index.tsx

@@ -0,0 +1,30 @@
+/// <reference path="../index.d.ts" />


Is this tripe-slash thing required on top of each test file?

Yeah, otherwise it can't find the module. Not sure if there's a way to avoid it. Do you have a suggestion?

@satya164 You can include the files on types/tsconfig.json like so:

{ "include": [ "index.d.ts", "tests/**/*" ] }

Note that you have to put these outside of compilerOptions.

@resir014 is this necessary? this comment is outdated. with the updated code I don't need this and typescript is checking the code properly

Esemesek · 2018-10-18T20:30:35Z

typings/index.d.ts

+  export const styled: StyledJSXIntrinsics & {
+    <T>(component: React.ReactType<T>): StyledTag<T>;
+
+    [key: string]: StyledTag<{


Use Record<string, SomeType> instead of { [key: string]: SomeType }

How would I use the record?

It is more readable.

Esemesek · 2018-10-18T20:34:57Z

typings/index.d.ts

+  ) => string;
+
+  export const cx: (
+    ...classNames: Array<string | false | undefined | null | 0>


Maybe you should extract to separate type to keep in semantically clean.

Esemesek

🔥

fixes #197

resir014

Overall, this looks good 👍 I left some comments for improvements (and a few others on some outdated diff), but this is good to go.

resir014 · 2018-10-19T12:45:23Z

types/index.d.ts

+  ): string;
+
+  function cx(
+    ...classNames: Array<string | false | undefined | null | 0>


This can probably be extracted into a separate type:

type FalseyValue = false | undefined | null | 0; ...classNames: (string | FalseyValue)[]

@resir014 yeah, I did that in a previous commit but then reverted, because it seems that all the type aliases I declare are exported. so the user could do:

import { cx, Falsy} from 'linaria'

Which feels wrong :(

satya164 · 2018-10-19T12:58:53Z

Thanks a lot for the review @resir014!

satya164 requested a review from Esemesek October 17, 2018 22:35

satya164 force-pushed the @satya164/typescript branch from 4cd1dcf to 33413b8 Compare October 17, 2018 22:35

satya164 commented Oct 17, 2018

View reviewed changes

Esemesek reviewed Oct 18, 2018

View reviewed changes

satya164 force-pushed the @satya164/typescript branch 8 times, most recently from 6280724 to 91d65db Compare October 18, 2018 19:06

satya164 changed the title ~~wip: add typescript definitions~~ feat: add typescript definitions Oct 18, 2018

satya164 force-pushed the @satya164/typescript branch 4 times, most recently from f0a7375 to abec70c Compare October 18, 2018 19:14

satya164 requested review from thymikee and zamotany October 18, 2018 19:20

satya164 force-pushed the @satya164/typescript branch from abec70c to b42fdc6 Compare October 18, 2018 19:21

thymikee approved these changes Oct 18, 2018

View reviewed changes

Esemesek requested changes Oct 18, 2018

View reviewed changes

satya164 force-pushed the @satya164/typescript branch 2 times, most recently from fb54c93 to f424096 Compare October 18, 2018 20:59

Esemesek approved these changes Oct 18, 2018

View reviewed changes

satya164 force-pushed the @satya164/typescript branch 2 times, most recently from 7d5c1a0 to e818e69 Compare October 18, 2018 22:13

satya164 force-pushed the @satya164/typescript branch from e818e69 to da4a94c Compare October 18, 2018 22:14

zamotany approved these changes Oct 19, 2018

View reviewed changes

satya164 force-pushed the @satya164/typescript branch from da4a94c to cc59fb9 Compare October 19, 2018 10:26

feat: add typescript definitions

32bc2f5

fixes #197

satya164 force-pushed the @satya164/typescript branch from cc59fb9 to 32bc2f5 Compare October 19, 2018 10:47

This was referenced Oct 19, 2018

TypeScript support #197

Closed

Please allow a space between css and ` #235

Closed

resir014 approved these changes Oct 19, 2018

View reviewed changes

satya164 closed this Oct 26, 2018

satya164 deleted the @satya164/typescript branch October 26, 2018 11:35

feat: add typescript definitions #263

feat: add typescript definitions #263

Uh oh!

Conversation

satya164 commented Oct 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

callstack-bot commented Oct 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

satya164 Oct 17, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

satya164 Oct 18, 2018 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Esemesek left a comment

Choose a reason for hiding this comment

Uh oh!

resir014 left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

satya164 commented Oct 19, 2018

Uh oh!

Uh oh!

satya164 commented Oct 17, 2018 •

edited

Loading

callstack-bot commented Oct 17, 2018 •

edited

Loading

satya164 Oct 17, 2018 •

edited

Loading

satya164 Oct 18, 2018 •

edited

Loading