web-dev-qa-db-ja.com

TS2740タイプに次のプロパティがありませんReact TypeScriptアプリのネイティブの読み取り専用<インターフェイス>エラー

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つ。

これに対する回避策はありますか？

typescriptreact-native
4
romin21

クラスを明示的に入力せずにこの問題を修正するには、以下のように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
    });
  }

したがって、以下のコードは、TypeScriptを使用している場合は特に問題ありません。

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>
         )
      }
    }
0
lomse

他の理由でこのページを見つけた私のような他の人にとっては、次のようなHTML5キャンバスを作成しようとしたときに、同じTypeScriptエラー（TS2740）が発生していました。

this.canvas = document.createElement("CANVAS");

それはキャンバスをうまく作成していましたが、エラーを解消するには、小文字に変更する必要がありました。

this.canvas = document.createElement("canvas");
0
Nic Scozzaro

私がこのエラーに遭遇した同様のケースがありました：Type '{label：string;値：文字列; } 'には、ReadOnlyタイプの次のプロパティがありません。

私はこの次のコードを持っていました：

interface IState {
  currentEnvironment: IEnvironment;
  environmentOptions: IEnvironment[];
}
interface IEnvironment {
  label: string;
  value: string;
}

配列の状態を初期化していました***（この場合は環境オプション）***を：

public state = {
    currentEnvironment: { label: '', value: '' },
    environmentOptions: [],
  };

より具体的に状態を初期化すると、次のような問題が解決されます。

public state = {
    currentEnvironment: { label: '', value: '' },
    environmentOptions: [{ label: '', value: '' }],//Also initializing the properties of the Interface
  };
0
Bhardwaj Avasarala