CODEWITHSUNDEEP
javascriptreactjstypescriptinterface
Amen Ra
Amen Ra

Reputation: 2851

How do I include Interfaces within Interfaces In my React Class?

I am getting a linting errors because my Class props Interface is empty. I am using other Interfaces within this component.

Here is my code:

import React from 'react';
import axios from 'axios';
import { Button } from '@material-ui/core';
// import { Form, Field } from 'react-final-form';
// import {TextField} from 'final-form-material-ui';

// tslint:disable-next-line
interface CompanyFinancialModalFormProps {}
export interface IValues {
  company_name: string;
  critical_technology: [];
}
export interface IFormState {
  [key: string]: any;
  values: IValues[];
  submitSuccess: boolean;
}

export default class CompanyFinancialModalForm extends React.Component<CompanyFinancialModalFormProps, IFormState> {
  constructor(props: CompanyFinancialModalFormProps) {
    super(props);
    this.state = {
      company_name: '',
      critical_technology: [],
      values: [],
      submitSuccess: false
    };
  }

  public render() {
    const {} = this.state;

    return (
      <div>
        <form>
          <div className='submit-button-wrapper'>
            <Button aria-label='home' className={'submit-button'} type='submit'>
              Add Company
            </Button>
          </div>
        </form>
      </div>
    );
  }
}

How can I structures this right so I don't have to use // tslint:disable-next-line

Upvotes: 1

Views: 255

Answers (1)

phry
phry

Reputation: 44086

This is neither a TypeScript nor a React error message.

Your linter (tsLint) has the no-empty-interface rule enabled.

And honestly, I would just deactivate that rule. (Take a look at your tslint.json for that) Your use case of specifying Props as an interface even though they are (at the moment) empty is totally valid - that way you can later specify more props without worrying that you forgot that type somewhere.

Not every linter rule is "generally useful". And here, it just isn't.

Upvotes: 2

Related Questions