Add TypeScript definitions

morajabi / styled-media-query

💅💍 Better media queries for styled-component

MIT License

1.32k stars 53 forks source link

Add TypeScript definitions #16

Closed franky47 closed 5 years ago

franky47 commented 5 years ago

Relates to issue #3.

Brings the following TypeScript features:

[x] import media from 'styled-media-query' in a TypeScript file
[x] Define a custom media object with given breakpoints
[x] Connect ThemeInterface from styled-components to default or custom media object
[x] Use custom props types when creating media-queried styled components
[x] 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 commented 5 years ago

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 commented 5 years ago

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

sqal commented 5 years ago

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

morajabi commented 5 years ago

@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 commented 5 years ago

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

franky47 commented 5 years ago

@sqal thanks, it should work now.