React Router DOM 的 Typescript 错误

Question

用yarn安装react-router-dom和history后，安装它们各自的类型定义(@types/react-router-dom和 @types/history)，我正在阅读以下错误。任何人都可以帮助我解决这些问题，因为我不太确定如何添加“构造或调用签名”，也不了解我传递给 Route 组件的组件有什么问题。

错误如下:

Failed to compile.

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(40,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(46,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(56,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(74,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(79,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(87,35): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router/index.d.ts
(92,29): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(33,31): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(40,28): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(46,22): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in /Users/robskrob/code/projects/blog/node_modules/@types/react-router-dom/index.d.ts
(55,25): error TS2314: Generic type 'Component<P, S>' requires 2 type argument(s).

Error in ./src/index.tsx
(28,6): error TS2604: JSX element type 'Router' does not have any construct or call signatures.

Error in ./src/index.tsx
(29,8): error TS2604: JSX element type 'Switch' does not have any construct or call signatures.

Error in ./src/index.tsx
(30,10): error TS2604: JSX element type 'Route' does not have any construct or call signatures.

这是文件:

// React
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Route, Router, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';


// Redux
import { Provider } from 'react-redux';

// Custom
import Home from './containers/Home';

// Styles
import './styles.css';

// Store
import { configureStore } from './store';

// Configure Store
const store = configureStore();

const history = createBrowserHistory();

// Render
ReactDOM.render(
  <Provider store={store}>
    <Router history={history}>
      <Switch>
        <Route exact path='/' component={Home} />
      </Switch>
    </Router>
  </Provider>,
  document.getElementById('root') as HTMLElement
);

这是我的 package.json:

{
  "name": "eai-reactjs-typescript-redux-starter",
  "description": "A ReactJS/TypeScript + Redux starter template with a detailed README describing how to use these technologies together and constructive code comments.",
  "version": "0.1.0",
  "private": true,
  "homepage": ".",
  "dependencies": {
    "amazon-cognito-identity-js": "^1.19.0",
    "amazon-cognito-js": "^1.1.0",
    "aws-sdk": "^2.80.0",
    "history": "^4.6.3",
    "react": "^15.6.1",
    "react-dom": "^15.6.1",
    "react-redux": "^5.0.5",
    "react-router-dom": "^4.1.1",
    "redux": "^3.7.0",
    "redux-logger": "^3.0.6"
  },
  "devDependencies": {
    "@types/enzyme": "^2.8.0",
    "@types/history": "^4.6.0",
    "@types/jest": "^19.2.3",
    "@types/node": "^7.0.18",
    "@types/react": "^15.0.24",
    "@types/react-dom": "^15.5.0",
    "@types/react-redux": "^4.4.40",
    "@types/react-router-dom": "^4.0.5",
    "@types/redux-logger": "^3.0.0",
    "enzyme": "^2.8.2",
    "react-addons-test-utils": "^15.5.1",
    "react-scripts-ts": "1.4.0",
    "redux-devtools-extension": "^2.13.2"
  },
  "scripts": {
    "start": "react-scripts-ts start",
    "build": "react-scripts-ts build",
    "test": "react-scripts-ts test --env=jsdom",
    "eject": "react-scripts-ts eject"
  }
}

这是 a link如果有人想仔细查看所有代码，请访问我的 github 存储库。

Answer 1

我遇到了同样的问题。运行 npm install @types/react @types/react-dom --save-dev 来更新这些包来修复它。