TypeScript + React突然出现不兼容的Props错误

时间:2017-10-24 15:44:35

标签: javascript reactjs typescript jsx

昨天,我的TypeScript + React项目一切正常。今天,一切都被打破,没有任何改变,任何配置。使用Git将其回滚到工作版本没有帮助。使用NPM重新安装所有软件包无济于事。

我试图从我的App.jsx中删除所有内容以找到错误。

这是我的app.jsx

import * as React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

interface Props {}

class App extends React.Component<Props> {
    render() {
        return (
            <div className="App">
                <Router>
                    <div>
                        <Route exacty={true} path="/" component={<p>Hello</p>}/>
                    </div>
                </Router>
            </div>
        );
    }
}

export default App;

但这仍然给我一个错误:

(10,5): error TS2605: JSX element type 'BrowserRouter' is not a constructor function for JSX elements.
Types of property 'setState' are incompatible.
Type '{ <K extends never>(f: (prevState: void, props: BrowserRouterProps) => Pick<void, K>, callback?: ...' is not assignable to type '{ <K extends never>(f: (prevState: {}, props: any) => Pick<{}, K>, callback?: () => any): void; <...'.
  Types of parameters 'f' and 'f' are incompatible.
    Type '(prevState: {}, props: any) => Pick<{}, any>' is not assignable to type '(prevState: void, props: BrowserRouterProps) => Pick<void, any>'.
      Types of parameters 'prevState' and 'prevState' are incompatible.
        Type 'void' is not assignable to type '{}'.

我遇到的问题是,每个包含Props的组件都被破坏了。例如,如果我有一个组件,例如我的标题I get an error such as this 标题是具有空Props对象的Component。

如果有帮助,这是我的tsconfig.json和package.json https://pastebin.com/FSyCA1BB

2 个答案:

答案 0 :(得分:3)

我遇到的问题是在package.json中我有@ types / react-router-dom。没有任何版本可以工作,但是从package.json中完全删除它可以解决问题。

答案 1 :(得分:1)

react-router的类型定义经常过时/无效。维护类型定义的问题与react-router的文档经常过时的事实有关。

修复

等到定义赶上

替代

我写了一些简单的东西来解决它http://basarat.com/takeme