Свойство 'checked' не существует для типа 'Switch'

Question

Я получаю Property 'checked' does not exist on type 'Switch'. Сообщение от TypeScript за this.checked и this.disabledcreateRefs. Кроме того, в последней строке я также получаю Property 'checked' does not exist on type 'Switch предупреждение от TS. Как я могу исправить эти предупреждения?

interface Props {
  checked: boolean;
  onChange: (checked: boolean) => void;
  disabled?: boolean;
}

interface States {
  checked: boolean;
  disabled?: boolean;
}

export default class Switch extends React.PureComponent<Props, States> {
  constructor(props: any) {
    super(props);
    this.checked = React.createRef(); // comment this line out to use as controlled component
    this.disabled = React.createRef(); // comment this line out to use as controlled component
    this.state = {
      checked: false,
      disabled: false,
    };
  }

  render() {
    ...
    <div ref={this.checked}> // TypeScript warns: Property 'checked' does not exist on type 'Switch'

Answer 1

Ваша проблема в том, что вам нужно определить эти переменные, прежде чем использовать их с this. Просто определите их private или же publicили чего хотите. Это тип будет результатом React.createRef() так что React.RefObjectобъект. Если вы знаете, на каком элементе узла вы будете использовать ref, то вы можете уточнить его по типу.

Например, вы используете this.checked на div, поэтому вы можете определить его как React.RefObject<HTMLDivElement>. Если вы еще этого не знаете, используйте React.RefObject<unknown>:

export default class Switch extends React.PureComponent<Props, States> {
  private checked: React.RefObject<HTMLDivElement>;
  private disabled: React.RefObject<unknown>;

  constructor(props: any) {
    super(props);
    this.checked = React.createRef(); // comment this line out to use as controlled component
    this.disabled = React.createRef(); // comment this line out to use as controlled component
    this.state = {
      checked: false,
      disabled: false
    };
  }

  render() {
    return <div ref={this.checked} />;
  }
}