How can i transfer material-ui properties with typescript

[yvanwangl]

I want to transfer material-ui properties with typescript, such as:

<Field
         name="username"
         validate={required}
         component={TextField as any}
         label='User Name'
         floatingLabelText='Email'
         hintText= 'Digite sua senha'
         autofocus= true
/>

But i got an error Field does not has attribute "floatingLabelText". Does there have any example use with typescript ? anyone help :1st_place_medal:

[lexparsimonet]

I see you are using a material-ui version that is v0.19.4 or earlier, @yvanwangl did you install @types/material-ui?

I donot/have not worked with TypeScript before, and I did not see any definition for floatingLabelText in the git source for @types/material-ui but perhaps that package is a solution.

Also, I found this via stackoverflow, the second comment seems to give some more comprehensive answers for setting up the DefinitelyTyped package for use with material-ui, namely the inclusion of the @types/react-tap-event-plugin which may be a contributing factor to your implementation of <Field>

[bigbearzhu]

From my understanding, Typescript doesn't generic React component markup very well https://github.com/Microsoft/TypeScript/issues/3960. I use it this way:

class TextFieldContainer extends Field<TextFieldProps> { };

export class MyForm extends Component<MyFromProps> {
    render() {
        return <div>
            <TextFieldContainer component={TextField} 
                id='foo' 
                name='foo' 
                hintText='foo' 
                floatingLabelText='foo' 
                autoFocus={true} />
        </div>;
    }
}

[ailsky]

@bigbearzhu, could you outline 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> {} // Your example
  export class TextFieldContainer2 extends GenericField<TextFieldProps> {} // Your example plus some my researches
  /* 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 material-ui-next.

[bigbearzhu]

This is strange for not being able to find the module. Do you have \node_modules\redux-form-material-ui\lib\index.d.ts in your project folder? It should be the same as here. You shouldn't need to declare the module by yourself if that index.d.ts file exists.

[ailsky]

@bigbearzhu, I use material-ui-next and redux-form-material-ui@5. There is no index.d.ts. So, I'm trying to declare the module.