如何在React类的Interfaces中包含Interfaces？

Question

因为我的Class属性接口是空的，所以我收到了linting错误。我正在使用此组件中的其他接口。

下面是我的代码：

​

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错误消息。

您的林特(tsLint)已启用no-empty-interface rule。

老实说，我会停用这条规则。(看看你的tslint.json吧)你把Props指定为一个接口的用例是完全有效的，即使它们(目前)是空的-这样你以后就可以指定更多的props，而不用担心把那个类型忘在什么地方了。

并不是每个linter规则都是“通常有用的”。但在这里，事实并非如此。