如何在我的 React 类的接口中包含接口？答案

【问题标题】：How do I include Interfaces within Interfaces In my React Class?如何在我的 React 类的接口中包含接口？
【发布时间】：2020-03-30 16:47:15
【问题描述】：

我收到一个 linting 错误，因为我的 Class props 接口为空。我在这个组件中使用其他接口。

这是我的代码：

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

【问题讨论】：

为什么不只传递一个空对象呢？ <{}, ...>

标签： javascript reactjs typescript interface

【解决方案1】：

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

您的 linter (tsLint) 启用了 no-empty-interface rule。

老实说，我只会停用该规则。（看看你的tslint.json）你将 Props 指定为接口的用例即使它们（目前）是空的也是完全有效的——这样你以后可以指定更多的道具而不必担心你忘记了那个类型某处。

并非每个 linter 规则都“普遍有用”。在这里，它只是不是。

【讨论】：