JSX-Elementtyp 'App' ist keine Konstruktorfunktion für JSX-Elemente. Arten von Eigentum ‚setState‘ sind unvereinbar

Question

ich die Microsoft TypeScript-React-Starter bin mit und bekam diesen Compiler-Fehler während 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 '{}'. 

So scheint es, wie meine setState Funktion falsche Unterschrift hat, aber ich bin nicht sicher, wie man es beheben . Hier ist mein Code:

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

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

Ich verwende:

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 

Update:

Ich fand heraus, dass die generischen Typen Entfernen <{}, null> die Fehler löscht. Aber ich würde immer noch gerne lernen, warum ich den Fehler bekommen habe.

Answer 1

TLDR; Der Status darf nicht null sein. Deklarieren Sie eine Schnittstelle für sie oder erklären es {}

Antwort liegt in @types/react

Mit Blick auf die definition, weder Staat noch Requisiten sind nicht als null bestimmt.

Als Sie App als class App extends React.Component<{}, null> { deklarierten, haben Sie im Wesentlichen gesagt, "Zustand ist vom Typ null".

Jetzt hängt der Typ setState von dem Typ ab, den Sie für den Status angeben, und der Konflikt mit dem lesser known version of the setState api. prevState wird als {} deklariert (der Standardwert, da keine Schnittstelle für den Status angegeben wurde), der nicht mit null kompatibel ist und zu dem Fehlerprotokoll führt, das Sie gesehen haben.