Le type d'élément JSX 'App' n'est pas une fonction de constructeur pour les éléments JSX. Types de propriété « setState » sont incompatibles

Question

J'utilise le Microsoft TypeScript-React-Starter et obtenu cette erreur de compilation lors de 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 '{}'. 

Il semble donc que ma fonction setState a signature incorrecte mais je ne suis pas sûr de savoir comment fixer . Voici mon 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 
); 

J'utilise:

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 

Mise à jour:

J'ai découvert que la suppression des types génériques <{}, null> efface l'erreur. Mais j'aimerais toujours savoir pourquoi j'ai eu l'erreur.

Answer 1

TLDR; L'état ne peut pas être nul. Déclarez une interface pour ou déclarer {}

réponse se trouve dans @types/react

En regardant le definition, ni l'état ni les accessoires ne sont pas destinés à être nulle. Lorsque vous avez déclaré App comme class App extends React.Component<{}, null> {, vous avez dit essentiellement que "l'état est de type null".

Maintenant, le type de setState dépend du type que vous spécifiez pour l'état et il est en conflit avec le lesser known version of the setState api. prevState est déclaré comme {} (la valeur par défaut, car aucune interface pour l'état n'a été spécifiée) qui n'est pas compatible avec null, ce qui conduit au journal des erreurs que vous avez vu.