javascript - 如何在我的 React 类中的接口(interface)中包含接口(interface)？

Question

我收到一个 linting 错误，因为我的 Class props Interface 是空的。我在此组件中使用其他接口(interface)。

这是我的代码:

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>
    );
  }
}

我怎样才能正确构造它，这样我就不必使用 //tslint:disable-next-line

Answer 1

这既不是 TypeScript 也不是 React 错误消息。

你的 linter (tsLint) 有 no-empty-interface rule启用。

老实说，我只想停用该规则。 (为此请查看您的 tslint.json)您将 Props 指定为接口(interface)的用例，即使它们(目前)是空的也是完全有效的 - 这样您以后可以指定更多 Prop ，而不必担心您忘记了该类型某处。

并非每个 linter 规则都“普遍有用”。而在这里，事实并非如此。