Как я могу решить эту проблему потока ошибок при объявлении this.props

Question

У меня есть этот код

export default class CompanyDetails extends React.Component<{}, State> {
  state = {
    profile: {
      name: { value: '', isRequired: true, hasError: false, order: 1 },
      industry: { value: '', isRequired: false, hasError: false, order: 2 },
      address: { value: '', isRequired: false, hasError: false, order: 3 },
      crn: { value: '', isRequired: true, hasError: false, order: 4 },
      website: { value: '', isRequired: false, hasError: false, order: 5 },
      employeesNbr: { value: '', isRequired: true, hasError: false, order: 6 },
      phoneNumber: { value: '', isRequired: true, hasError: false, order: 7 },
      userRole: { value: '', isRequired: true, hasError: false, order: 8 },
      personCheck: {
        value: false,
        isRequired: true,
        hasError: false,
        order: 9,
      },
    },
    showModal: {
      modal: { error: false },
    },
    buttonIsValid: {
      buttonIsValid: { isButtonValid: false },
    },
  };

  componentDidMount() {
    this.props.onRef(this);
  }
  componentWillUnmount() {
    this.props.onRef(undefined);
  }

  handleInputChange = (key: string, value: string) => {
    const { profile } = this.state;
    profile[key].value = value;
    profile[key].hasError = false;
    this.setState({ profile });
    this.handleIsButtonValid();
  };

Как я могу определить тип this.props.ref, потому что поток пряжи дает мне эту ошибку

Cannot call `this.props.onRef` because property `onRef` is missing in object type [1].       

   src/containers/company-details.jsx:64:5
   64|     this.props.onRef(this);
           ^^^^^^^^^^^^^^^^^^^^^^

Я не могу найти правильный способ сделать это. Я попытался объявить непосредственно как опора, но также и это не сработало

Answer 1

В настоящее время вы не определяете форму реквизита (используя {} в React.Component<{}, State>). Так что просто определите тип для Props и используйте его:

type Props = {
  onRef: (CompanyDetails | void) => void,
}

export default class CompanyDetails extends React.Component<Props, State> {
  // ...

  componentDidMount() {
    this.props.onRef(this);
  }
  componentWillUnmount() {
    this.props.onRef(undefined);
  }
}

Playground

Документы при добавлении типов потока в компоненты React