Тип TS2740 отсутствует следующие свойства из-за ошибки ReadOnly <MyInterface>в React Native с приложением TypeScript

Question

Поскольку StatelessComponent устарело, я пытаюсь превратить все компоненты в классы.

У меня есть интерфейс, например:

interface MyInterface{
    prop1: number;
    prop2: boolean;
}

И я использую его вкласс:

class MyComponent extends React.Component<MyInterface> {
   ...
   public render(){...}
}

И когда я пытаюсь использовать MyComponent вот так:

<MyComponent 
    prop1={3}
    prop2={false}
/>

Я получаю эту ошибку:

TS2740: Тип {prop1: 3, prop2: false} отсутствуют следующие свойства типа ReadOnly: render, context, setState, forceUpdate и другие 3.

Есть ли обходной путь к этому?

Answer 1

Чтобы решить эту проблему без явного ввода класса, просто переместите state из constructor, как показано ниже:

class MyComponent extends React.Component<any> {
    state = {
        key1: value1,
        key2: value2
    }
    render(){
        return(
           <div>Hello World</div>
        )
    }
}

Этот подход полезен, когда у вас есть функция, которая устанавливаетсостояние ввода формы выглядит следующим образом:

handleInputChange = (event)=>{
    const target = event.target;
    const value = target.type === 'checkbox' ? target.checked : target.value;
    const name = target.name;

    this.setState({
      [name]: value
    });
  }

Так что приведенный ниже код будет очень хорош, особенно если вы используете машинопись:

class MyComponent extends React.Component<any> {

      state = {
          key1: value1,
          key2: value2
      }

      handleInputChange = (event: React.ChangeEvent<HTMLInputElement>)=>{
        const target = event.target;
        const value = target.type === 'checkbox' ? target.checked : target.value;
        const name = target.name;

        this.setState({
          [name]: value // no typing error
        });
      }

      render(){
         return(
            <div>Hello World</div>
         )
      }
    }

Answer 2

Я наконец решил проблему, изменив объявление класса на class MyComponent extends React.Component<any, MyInterface>.