Rebass: Typescript definitions

[jongold]

Has anyone got up to date definitions? The one in @types seems to be out of date — I can try to find time to take a pass at it if not.

[ryanponce]

Were you able to make some progress on this @jongold?

I'm pretty new to generating type definitions but, I was able to generate some types by using dts-gen. I'm not sure if they are correct, as they look very different than the ones in DefinitelyTyped. Have you tried that?

[jongold]

@ryanponce I went pretty deep in a rabbit hole - I made types for styled-system & grid-styled too. they're currently all living in a repo of mine semi-finished; will try forking each of the three library repos and adding them in there, and pushing my forks.

[ryanponce]

Okay cool. Let me know if you need any help at all.

[jongold]

@ryanponce actually, that turned into a nightmare. It would be lovely to compose things eventually but it got pretty fiddly.

I wrote this whole thing by hand which:

• is not maintainable - I don't want to be responsible for this file forever!
• might have errors

would love ideas on generating it automatically - I _think_ we can make a codemod which parses system-components calls and figures out what props they're composing.

https://gist.github.com/jongold/2caba317e1bd24e44c209f3ded51d9ea - just copy this to your local project for now.

will PR the DefinitelyTyped repo if it seems to work for you…

[jxnblk]

Each function in styled-system includes a propTypes object, if that's of any help for generating TS definitions.

And, I'd recommend using DefinitelyTyped for things like this if you can

[brandonmp]

@jongold my (naive) guess is it'd take as long to just plow thru by hand as it would to write a codemod

you've put lots of work into that gist and so far, besides a few adjustments, it seems to work great.

here's a version w/ some changes i made based on what TypeScript was telling me

some edits i made include:

• removing the Yolo interface (handy but obviously hamstrings the utilty of types here)
• added basic HTML Element props to most components (as many as i could).. .things like id, className etc. all interfaces probably should extend something that takes care of this, but apparently StatelessComponent is not that thing?
• corrected some errors (eg i think f={2} syntax for font is deprecated? so should only allow fontSize={2})

[mariogillazaro]

Version 0.2.5 does not support extend on components, this could be a deal breaker for me. Any ideas on how to implement that?

[robeberhardt]

@mariogillazaro I was able to get around that by using styled() syntax like so:

const CustomToolbar = styled(Toolbar)`
  .someClass { #styles }
`

[jxnblk]

Closing this out for now. If someone would like to PR a link to type script definitions in the docs, I'd accept it, but hopefully this makes its way to a home somewhere

[fnky]

Made a new version the revision by @brandonmp that supports EmotionThemingModule for the Provider so that you can get typing information within styled props:

import styled from './styled-theme'

export default styled(MyComponent)`
  ${props => props.theme.<show completions from the theme> }
`

That is working, but at the moment it is quite bothersome that you have to import the emotion-compatible Provider from rebass/emotion and the rest of types from rebass.

However, haven't figured out how to export types from rebass in rebass/emotion and overwrite incompatible types to be compatible with emotion's interface.

[urvashi01]

@fnky @jxnblk
Any update on how to use rebass/emotion with typescript?

import { Button } from 'rebass/emotion';

throws an error Could not find a declaration file for module 'rebass/emotion'

[fnky]

@urvashi01 It isn't official yet, but you can use the typings that I made—based on @brandonmp rebass typings—to also support theming using emotion-theming:

https://gist.github.com/fnky/8590633cbfcdf2a96bb0ae041ea512c8

Keep in mind that it doesn't fully cover everything in rebass, but most is covered. This may also break in the future, if rebass updates with breaking changes. For now this works for my own needs.

I'll move this gist into a proper repository and module when I get the time. For now you can simply just copy and paste the files into your own project, as described in the gist.

[S1lentium]

Bump! Outdated types for BoxProps in @types/rebass

[nc9]

And, I'd recommend using DefinitelyTyped for things like this if you can

the @types namespace is for projects that don't support type definitions at all. It's preferable to include an .d.ts file in home projects, DT is more a patch.

Based on npm downloads about 40% of rebass users are using TypeScript, I think it would be a good idea to include a definition inside the project

This also helps with versioning definitions, which is a PITA with DefinitelyTyped

I'd be more than happy to send a PR with an index.d.ts for this and other projects

[beeeku]

Any updates on this?