generate-connect-types

What is this?

This is something that is supposed to generate interfaces for your connected components

Given a input like

import {connect} from 'react-redux'
import {State} from './somewhere-appstate'

const t = connect(
  (state: State) => ({
    index: state.index,
    name: state.name,
    ble: state.bla,
  }),
  () => ({
    dispatch: () => console.log('hej'),
  }),
)(Comp)

it outputs

interface ConnectProps {
  index: number
  name: string
  ble: Bla
  dispatch: () => void
}

This package uses typescript to create a program from the file sent as the argument and tries to extract information from the connect() call to build an interface for given props.
It also uses prettier to format the interface before inserting it into the file.

Why?

Because I'm lazy and writing types for connected props is boring.

Try it out

The best way to try this is to use npx or install the module globally.

# Be sure to make the path relative from the folder you re in
# If useing npx
npx generate-connect-types src/components/foo.tsx

# Or install it globally
npm i -g generate-connect-types
generate-connect-types src/components/your-awesome-component.tsx

Now src/components/foo.tsx should have an autogenerated interface for the connected props

Build

# Install deps
yarn # or npm i

# Build code
yarn compile # compiles code to javascript

yarn compile:watch # compiles with watch mode

Test

yarn test

# or watch mode
yarn test:watch

Developing

If you want to contribute or tinker with this, this is how my workflow looks like:

1. Set the compiler in watch mode by running yarn compile:watch
2. In another terminal window, run node index.js path/to/component.tsx (there are components in tests/assets/ that you can use)
3. Hack away!

The components in tests/assets gets a lot of interfaces so you should probably remove them. Running the tests will reset them tho. Or you could revert the file in git.

Todo

• [x] write the interface to the same file
• [x] integrationtests
• [x] windows support
• [ ] unit tests
• [x] make it work for deeply nested literal object types
• [x] figure out a way to get more info about an object type instead of just returning it as string
• [ ] make a vs code extension out of it
• [ ] configuration (interface name, prettier options)