web-dev-qa-db-ja.com

JSX要素タイプ「App」は、JSX要素のコンストラクター関数ではありません。プロパティ「setState」のタイプには互換性がありません

Microsoft TypeScript-React-Starter を使用しており、npm start中にこのコンパイルエラーが発生しました。

./src/index.tsx
(16,5): error TS2605: JSX element type 'App' is not a constructor function for JSX elements.
  Types of property 'setState' are incompatible.
    Type '{ <K extends never>(f: (prevState: null, props: {}) => Pick<null, K>, callback?: (() => any) | un...' is not assignable to type '{ <K extends never>(f: (prevState: {}, props: any) => Pick<{}, K>, callback?: (() => any) | undef...'.
      Types of parameters 'f' and 'f' are incompatible.
        Type '(prevState: {}, props: any) => Pick<{}, any>' is not assignable to type '(prevState: null, props: {}) => Pick<null, any>'.
          Types of parameters 'prevState' and 'prevState' are incompatible.
            Type 'null' is not assignable to type '{}'.

だから、私のsetState関数は間違った署名を持っているように見えますが、それを修正する方法がわかりません。私のコードは次のとおりです。

class App extends React.Component<{}, null> {
  render() {
    return (
      <div className="App">
        ...
      </div>
    );
  }
}

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root') as HTMLElement
);

使っています：

node v6.11.0
npm v5.1.0
TypeScript v2.4.1
react v15.6.1
redux v3.7.1
react-redux v5.0.5
react-scripts-ts v2.3.2

更新：

ジェネリック型<{}, null>を削除するとエラーがクリアされることがわかりました。しかし、なぜエラーが発生したのかを知りたいです。

reactjstypescript2.0
14
Zening Qu

TLDR;状態をnullにすることはできません。インターフェイスを宣言するか、{}を宣言します

答えは @ types/react にあります

definition を見ると、状態も小道具もnullであることを意図していません。

Appをclass App extends React.Component<{}, null> {として宣言したとき、本質的に「状態はnull型です」と言いました。

setStateのタイプは、状態に指定したタイプに依存し、 setState apiの既知のバージョンではない と衝突しました。 prevStateは、nullと互換性のない{}（状態のインターフェイスが指定されていないため、デフォルト）として宣言され、エラーログが表示されます。

18
Manas Jayanth

この修正は関係ないかもしれませんが、<{}, null>後class App extends React.Component。これが私の場合の修正です。

変化する import React from 'react';

import * as React from 'react';

0
Tatsu