javascript - TypeScript 编译错误

Question

我正在将现有的 React (v15) 项目从 JS 迁移到 TypeScript 2。我首先将一个 React 组件的扩展名更改为 .tsx 并更新 ，将其迁移到 TypeScript PropTypes 到接口(interface)。

package.js 中的新依赖项:

"ts-loader": "^1.0.0",
"typescript": "^2.0.7",
"@types/classnames": "0.0.31",
"@types/node": "^6.0.46",
"@types/react": "^0.14.42",
"@types/react-dom": "^0.14.18",
"@types/react-helmet": "0.0.24",
"@types/react-redux": "^4.4.32",
"@types/react-router": "^2.0.38",
"@types/redux": "^3.6.31"

Webpack 加载器:

module: {
  loaders: [
    { test: /\.tsx?$/, loader: 'ts-loader'},
    ...
  ]
},
resolve: {
  extensions: ['', '.ts', '.tsx', '.js', '.jsx', '.json']
  ...
}

tsconfig.json:

{
  "compilerOptions": {
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "noImplicitAny": false,
    "sourceMap": false,
    "inlineSourceMap": true,
    "noEmitHelpers": true,
    "allowJs": true,
    "allowSyntheticDefaultImports": true
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
    "**/*.spec.ts"
  ]
}

组件Home.jsx:

import * as React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import styles from './Home.scss';

class Home extends React.Component<{
  regions: Array
  ...
}, {}> {
  render() {
    return <div>...</div>;
  }
}

export default connect(
  state => ({
    ...
  }),
  dispatch => bindActionCreators(...)
)(Home);

我已删除 node_modules 并运行 npm install。

但是我遇到了下面列出的很多编译错误。我做错了什么？

[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (4,43): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (4,69): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (4,89): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (5,44): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (5,70): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (5,90): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (7,98): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/applyRouterMiddleware.d.ts
[0] (7,118): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/withRouter.d.ts
[0] (3,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/withRouter.d.ts
[0] (3,73): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'StatelessComponent'.
[0] project/web-app/node_modules/@types/react-router/lib/withRouter.d.ts
[0] (3,105): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'PureComponent'.
[0] project/web-app/node_modules/@types/react-router/lib/createMemoryHistory.d.ts
[0] (3,57): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryOptions'.
[0] project/web-app/node_modules/@types/react-router/lib/createMemoryHistory.d.ts
[0] (3,76): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,10): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryOptions'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,35): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryQueries'.
[0] project/web-app/node_modules/@types/react-router/lib/useRouterHistory.d.ts
[0] (1,51): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'CreateHistory'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (6,17): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (7,18): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (12,16): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/match.d.ts
[0] (16,81): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (4,29): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (5,30): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (6,31): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (7,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (8,27): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/PropTypes.d.ts
[0] (9,28): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (10,48): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (11,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (14,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (19,43): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (20,50): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (21,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/RouterContext.d.ts
[0] (22,21): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/RouteUtils.d.ts
[0] (4,16): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/useRoutes.d.ts
[0] (4,48): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'CreateHistory'.
[0] project/web-app/node_modules/@types/react-router/lib/useRoutes.d.ts
[0] (4,69): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'CreateHistory'.
[0] project/web-app/node_modules/@types/react-router/lib/RouteContext.d.ts
[0] (3,35): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Mixin'.
[0] project/web-app/node_modules/@types/react-router/lib/Lifecycle.d.ts
[0] (3,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Mixin'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (9,23): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (9,103): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (10,26): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Pathname'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (10,46): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (14,40): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/History.d.ts
[0] (20,39): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'HistoryQueries'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (3,10): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (11,40): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (23,35): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Route.d.ts
[0] (24,42): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (10,43): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (14,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (15,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] webpack built 8ae797e4fda263a74f18 in 22518ms
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (17,38): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Redirect.d.ts
[0] (18,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (10,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (13,37): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (14,38): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (18,40): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRoute.d.ts
[0] (19,47): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (10,45): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (12,16): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (13,16): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (15,47): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/IndexRedirect.d.ts
[0] (16,40): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (11,39): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'HTMLAttributes'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (11,67): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (12,29): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'CSSProperties'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (15,37): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationDescriptor'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (16,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (17,19): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (20,34): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Link.d.ts
[0] (21,41): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (3,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'QueryString'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (3,18): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Query'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (4,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Location'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (4,15): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationDescriptor'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (4,35): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'LocationState'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (5,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'History'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (6,5): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Pathname'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (6,15): error TS2305: Module '"project/web-app/node_modules/history/lib/index"' has no exported member 'Path'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (9,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (16,30): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactNode'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (23,28): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactType'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (51,38): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Props'.
[0] project/web-app/node_modules/@types/react-router/lib/Router.d.ts
[0] (83,26): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-router/index.d.ts
[0] (10,33): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-router/index.d.ts
[0] (12,35): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Requireable'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (9,32): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ComponentClass'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (10,36): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'StatelessComponent'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (11,24): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'ReactNode'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (12,23): error TS2305: Module '"project/web-app/node_modules/redux/lib/index"' has no exported member 'Store'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (13,26): error TS2305: Module '"project/web-app/node_modules/redux/lib/index"' has no exported member 'Dispatch'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (14,31): error TS2305: Module '"project/web-app/node_modules/redux/lib/index"' has no exported member 'ActionCreator'.
[0] project/web-app/node_modules/@types/react-redux/index.d.ts
[0] (107,31): error TS2507: Type '(props: any, context: any, updater: any) => void' is not a constructor function type.
[0] project/web-app/node_modules/@types/react-helmet/index.d.ts
[0] (41,30): error TS2305: Module '"project/web-app/node_modules/react/react".export=' has no exported member 'Component'.
[0] project/web-app/node_modules/@types/react-helmet/index.d.ts
[0] (44,35): error TS2507: Type '(props: any, context: any, updater: any) => void' is not a constructor function type.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (9,10): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'ReactInstance'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (9,36): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'ComponentState'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (10,9): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'ReactElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (10,23): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'SFCElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (10,35): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'CElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (11,10): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'DOMAttributes'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (11,25): error TS2305: Module '"project/web-app/node_modules/react/react"' has no exported member 'DOMElement'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (25,34): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (32,33): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (32,82): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (43,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (47,63): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (48,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (53,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (58,26): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (61,33): error TS2304: Cannot find name 'Component'.
[0] project/web-app/node_modules/@types/react-dom/index.d.ts
[0] (61,82): error TS2304: Cannot find name 'Component'.

Answer 1

使用@types/react-router时，您还应该将@types/history添加到您的依赖项中。