-
Notifications
You must be signed in to change notification settings - Fork 53
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 type definitions for Typescript #3
Comments
Yes please. It would be perfect! |
Cool! Can you help maybe? |
Hi, is it available ? |
Yes! Do you want to pick it up? |
I could probably help here, I use TypeScript and I'd definitely like to see this library supported. There are two options here:
For the sake of simplicity of installation and maintenance, I'd go for option 1, what do you think ? |
I don't see any issue with 1st here! @franky47 take a look and if you managed to come up with a type definition, you're more than welcome to do a PR! |
At the moment I have a working implementation which covers most use cases but does not give any intellisense when using types for styled-components themes. For the sake of consistent developer experience, it would be preferable to have relevant suggestions when editing styles nested under a media query. Since the types required to do that have changed between |
As a side note, in order for base types to correctly resolve to a user-defined ThemeInterface, PR DefinitelyTyped#30511 for |
This is what it would look like at the moment to get support for both ThemeInterface and custom Props passed to the styled component: // src/custom/styled-media-query.ts
import { generateMedia } from 'styled-media-query'
import ThemeInterface from './theme'
interface Breakpoints {
phone: string
tablet: string
laptop: string
desktop: string
}
const media = generateMedia<Breakpoints, ThemeInterface>({
phone: '400px',
tablet: '600px',
laptop: '1200px',
desktop: '1500px'
})
export default media Usage to create styled components: // MyComponent.tsx
import styled from 'src/custom/styled-components' // `styled` with ThemeInterface
import media from 'src/custom/styled-media-query'
interface Props {
active: boolean
}
const StyledComponent = styled.div<Props>`
color: ${p => p.active ? p.theme.primary : p.theme.secondary};
${media.greaterThan<Props>('mobile')`
color: ${p => p.active ? p.theme.secondary : p.theme.primary};
`};
` Ideally, I'd like to find a solution that does not involve passing the Props type to |
@franky47 I tried your solution, but I'm getting an error. |
@franky47 I'm using React js with Typescript. |
Thanks so much for this! |
Thanks @morajabi ! |
@morajabi @franky47 am I correct in thinking that
should actually be
|
Indeed, however I'm not sure how this would play with autocompletion (does it still give you the keys of |
@franky47 I'm using WebStorm and, yes, changing it to |
As discussed in morajabi#3 by @budt0m : morajabi#3 (comment)
No description provided.
The text was updated successfully, but these errors were encountered: