Add TypeScript definitions

[franky47]

Relates to issue #3.

Brings the following TypeScript features:

• import media from 'styled-media-query' in a TypeScript file
• Define a custom media object with given breakpoints
• Connect ThemeInterface from styled-components to default or custom media object
• Use custom props types when creating media-queried styled components
• Intellisense for theme and custom props

I'll edit this message with the usage API for documentation once the depending PRs (#14, #15 and DefinitelyTyped#30511) have been merged.

[sqal]

Hi @franky47 I just wanted to give you a heads up that there's some issue with those typings. Here's an example which is not working for me:

${media.greaterThan('xl')`
  position: fixed;
  top: 50%; left: 0;
  ${size('100vh')} // <--- TS error here
`}

TypeScript error:

Argument of type '{ width: string | number; height: string | number; }' is not assignable to parameter of type 'InterpolationFunction<{}, any> | FlattenInterpolation<ThemeProps<any>>'.
  Type '{ width: string | number; height: string | number; }' is missing the following properties from type 'FlattenInterpolation<ThemeProps<any>>': length, concat, join, slice, and 18 more.

[franky47]

Interesting, I can't replicate that error, do you have a link to a project I can clone to take a look ?

[sqal]

Sure, I'll create reproduction repository for you later. Btw, I am using Typescript 3.2.2

[morajabi]

@franky47 Thank you so much for the PR! 😍 One question, have you tested it in a TS project yourself? As currently, I don't have a TS React project myself.

[sqal]

@franky47 Here's the repo - https://github.com/sqal/styled-media-query-types-bug

[franky47]

@sqal thanks, it should work now.

[andyford]

can this be merged?

[andy-hook]

Great work on these, are they ready to be merged? would love to have them in the package rather than in my custom typings.

[JClackett]

when will this be released :) ?

[morajabi]

@JClackett Published! Could you please try it and let me know? 🙌✨

[email protected]

[JClackett]

working! 👍 Thanks