Plans for typescript definitions for redux-form-material-ui v5 ?

[VasilyShelkov]

Great library and good to see a Beta for Material-ui's Beta.

I wondered if you were planning or in the process of adding typescript definitions to v5 ? If not I'd be happy to try and contribute ? Perhaps you would even prefer to have an @types package rather than part of this project ?

[mihirsoni]

@VasilyShelkov That would be great , would you mind the PR , else I would take it up later.

[ailsky]

I'm not familiar with TS very well, but I'm trying to figure it out. The following text is a duplicate of my comment from an issue (https://github.com/erikras/redux-form-material-ui/issues/197)

---

Can someone help with the definitions for the TextField?

As I understand, we should import TextField from redux-form-material-ui instead of material-ui/TextField. But in this case I always get a TS error:

---

I've tried the following to resolve the issue, but without success:

1. Declare definitions for the redux-form-material-ui (there are different ways just to test):

declare module 'redux-form-material-ui' {
  import { TextFieldProps } from 'material-ui/TextField';
  import { StatelessComponent } from 'react';
  import { Field, GenericField, WrappedFieldProps } from 'redux-form';

  /* tslint:disable:max-classes-per-file */
  export class TextField extends StatelessComponent<WrappedFieldProps & TextFieldProps> {}
  export class TextFieldContainer extends Field<TextFieldProps> {} // Test 1
  export class TextFieldContainer2 extends GenericField<TextFieldProps> {} // Test 2
  /* tslint:enable:max-classes-per-file */
}

2. Import all required libs:

import { TextFieldProps } from 'material-ui/TextField';
import { Field, GenericField } from 'redux-form';
import { TextField, TextFieldContainer, TextFieldContainer2 } from 'redux-form-material-ui';

// One more test
const TextFieldContainer3 = Field as { new (): GenericField<TextFieldProps> };

3. Combine

export class MyForm extends Component<MyFromProps> {
  render() {
    return <div>
      <TextFieldContainer
        name="test"
        component={TextField}
        props={{
          disabled: submitting,
        }}
      />
      <TextFieldContainer2
        name="test"
        component={TextField}
        props={{
          disabled: submitting,
        }}
      />
      <TextFieldContainer3
        name="test"
        component={TextField}
        props={{
          disabled: submitting,
        }}
      />
    </div>;
  }
}

But it doesn't work.

Errors for the TextFieldContainer:

Click to expand

Direct link to the screen: click

---

Errors for the TextFieldContainer2:

Click to expand

---

Errors for the TextFieldContainer3:

Click to expand

Direct link to the screen: click

---

I use [email protected], [email protected].

[mihirsoni]

@VasilyShelkov I would suggest to keep .d.ts file in the same repo as it is easily manageable.

TextField should be imported from the redux-form-material-ui and not from directly material-ui

[gilbsgilbs]

Hi there,

For what it's worth, I have the example from the README working with typings here. This includes Checkbox, RadioGroup, Select, Switch and TextField components. There's some more types missing, but I don't want to spend more time on this if it doesn't fit. Still adding the remaining components should be straightforward and quick (if you want to give it a go, feel free). Also, my types may be incomplete or inaccurate in some corner cases. I have never worked with redux-form, just planning to, so I cannot test this on a big project.

If you want to try it out, just run yarn start at the root of my git repo (it's basic creat-react-app project). Here is the interesting part: https://github.com/gilbsgilbs/redux-form-material-ui-typing/blob/master/src/typings/redux-form-material-ui.d.ts .

Let me know if it works for you.

Edit: I filled a PR here.