Add type definitions for Typescript

[morajabi]

[vittorio]

Yes please. It would be perfect!

[morajabi]

Cool! Can you help maybe?

[fred-croix]

Hi, is it available ?

[morajabi]

Yes! Do you want to pick it up?

[franky47]

I could probably help here, I use TypeScript and I'd definitely like to see this library supported.

There are two options here:

1. Bundle the .d.ts type definition file with this module and store it in this repository
2. Place it under the @types organisation in DefinitelyTyped/DefinitelyTyped

For the sake of simplicity of installation and maintenance, I'd go for option 1, what do you think ?

[morajabi]

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!

[franky47]

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 styled-components v3 and v4, I'll wait for PR #14 (and probably #15 as I could use some automated tests in verifying the types match) to be merged to propose this new feature.

[franky47]

As a side note, in order for base types to correctly resolve to a user-defined ThemeInterface, PR DefinitelyTyped#30511 for @types/styled-components will be needed as well, I'll keep an eye on it.

[franky47]

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 media.greaterThan<Props>('mobile'), but my knowledge of TypeScript does not (yet) cover composition of tagged template literals interpolations and type closures (if there's anything of the sort).

[angay9]

@franky47 I tried your solution, but I'm getting an error. Did you get the same one? A weird TypeScript issue.

[franky47]

@angay9 it looks like the type definitions are not found in your case. PR #16 is not yet merged, so public releases of styled-media-query don't include typings yet.

What is your setup ?

[angay9]

@franky47 I'm using React js with Typescript.

[nishunmind]

Thanks so much for this! @morajabi Seems like the PR for adding typings has been merged, would it be possible to do a new release with those changes? ☺️

[franky47]

[email protected] has been published, which include Typescript types, this issue can be closed.

Thanks @morajabi !

[budt0m]

@morajabi @franky47 am I correct in thinking that

export interface MediaGenerator<Breakpoints, Theme> {
  lessThan: <Props>(
    breakpoint: keyof Breakpoints
  ) => GeneratorFunction<Props, Theme>
  greaterThan: <Props>(
    breakpoint: keyof Breakpoints
  ) => GeneratorFunction<Props, Theme>
  between: <Props>(
    fist: keyof Breakpoints,
    second: keyof Breakpoints
  ) => GeneratorFunction<Props, Theme>
}

should actually be

export interface MediaGenerator<Breakpoints, Theme> {
  lessThan: <Props>(
    breakpoint: keyof Breakpoints | string
  ) => GeneratorFunction<Props, Theme>
  greaterThan: <Props>(
    breakpoint: keyof Breakpoints | string
  ) => GeneratorFunction<Props, Theme>
  between: <Props>(
    fist: keyof Breakpoints | string,
    second: keyof Breakpoints | string
  ) => GeneratorFunction<Props, Theme>
}

styled-media-query allows you to pass in a custom size to lessThan, greaterThan and between (see https://github.com/morajabi/styled-media-query#lessthan). The current typings only allow you to pass in a defined breakpoint.

[franky47]

Indeed, however I'm not sure how this would play with autocompletion (does it still give you the keys of Breakpoints but allow to pass any other string ?)

[budt0m]

@franky47 I'm using WebStorm and, yes, changing it to keyof Breakpoints | string still gives me the same autocompletion as before