JSX 元素类型 'App' 不是 JSX 元素的构造函数。 属性 'setState' 的类型不兼容

Question

我正在使用 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> 可以清除错误。但我仍然很想知道为什么会出现错误。

Answer 1

TLDR；状态不能为空。为它声明一个接口或者声明它{}

答案就在@types/react

查看 definition，state 和 props 都不能为 null。

当您将 App 声明为 class App extends React.Component<{}, null> { 时，您实际上是在说 "state is of type null"。

现在 setState 的类型取决于您为状态指定的类型，它与 lesser known version of the setState api 冲突。 prevState 声明为与 null 不兼容的 {}（默认设置，因为未指定状态接口），导致您看到错误日志。

Answer 2

也许此修复程序不相关，但在 class App extends React.Component 之后没有 <{}, null> 我得到了相同的错误消息。这是我的解决方法。

改变import React from 'react';

到import * as React from 'react';