Question

我正在开始一个新项目，并为react-redux和typescript找到了一个好但有点过时的样板（https://github.com/rokoroku/react-redux-typescript-boilerplate）。我使用node-check-updates将package.json更新为：

{
  "name": "typescript-react-redux-boilerplate",
  "version": "1.0.0",
  "private": true,
  "description": "A frontend boilerplate with React, Redux and Typescript",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server --debug --devtool cheap-module-source-map --output-pathinfo --history-api-fallback --hot --inline --progress --colors --port 3000 --open",
    "build": "webpack -p --progress --colors"
  },
  "license": "MIT",
  "devDependencies": {
    "@types/classnames": "2.2.3",
    "@types/history": "4.6.0",
    "@types/node": "8.0.34",
    "@types/react": "^16.0.10",
    "@types/react-dom": "16.0.1",
    "@types/react-redux": "5.0.10",
    "@types/react-router": "4.0.15",
    "@types/redux-actions": "2.2.2",
    "@types/webpack": "3.0.13",
    "@types/webpack-env": "1.13.2",
    "awesome-typescript-loader": "^3.2.3",
    "css-loader": "^0.28.7",
    "extract-text-webpack-plugin": "^3.0.1",
    "file-loader": "^1.1.5",
    "html-loader": "^0.5.1",
    "html-webpack-plugin": "^2.30.1",
    "postcss": "^6.0.13",
    "postcss-browser-reporter": "^0.5.0",
    "postcss-cssnext": "^3.0.2",
    "postcss-import": "^11.0.0",
    "postcss-loader": "^2.0.7",
    "postcss-reporter": "^5.0.0",
    "postcss-url": "^7.1.2",
    "react-hot-loader": "^3.0.0",
    "style-loader": "^0.19.0",
    "typescript": "^2.5.3",
    "url-loader": "^0.6.2",
    "webpack": "^3.7.1",
    "webpack-dev-server": "^2.9.1"
  },
  "dependencies": {
    "classnames": "^2.2.5",
    "react": "^16.0.0",
    "react-dom": "^16.0.0",
    "react-redux": "^5.0.6",
    "react-router": "^4.2.0",
    "redux": "^3.7.2",
    "redux-actions": "^2.2.1"
  }
}

容器代码未更改，如下所示：

import * as React from 'react';
import * as TodoActions from '../../actions/todos';
import * as style from './style.css';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import { RouteComponentProps } from 'react-router';
import { RootState } from '../../reducers';
import { Header, MainSection } from '../../components';

export namespace App {
  export interface Props extends RouteComponentProps<void> {
    todos: TodoItemData[];
    actions: typeof TodoActions;
  }

  export interface State {
    /* empty */
  }
}

@connect(mapStateToProps, mapDispatchToProps)
export class App extends React.Component<App.Props, App.State> {

  render() {
    const { todos, actions, children } = this.props;
    return (
      <div className={style.normal}>
        <Header addTodo={actions.addTodo} />
        <MainSection todos={todos} actions={actions} />
        {children}
      </div>
    );
  }
}

function mapStateToProps(state: RootState) {
  return {
    todos: state.todos
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(TodoActions as any, dispatch)
  };
}

错误：

ERROR in [at-loader] ./src/containers/App/index.tsx:21:1
    TS1238: Unable to resolve signature of class decorator when called as an expression.
  Type 'ComponentClass<Pick<Props, "history" | "location" | "match" | "staticContext">> & { WrappedCompon...' is not assignable to type 'typeof App'.
    Type 'Component<Pick<Props, "history" | "location" | "match" | "staticContext">, ComponentState>' is not assignable to type 'App'.
      Types of property 'render' are incompatible.
        Type '() => string | number | false | Element | Element[]' is not assignable to type '() => Element'.
          Type 'string | number | false | Element | Element[]' is not assignable to type 'Element'.
            Type 'string' is not assignable to type 'Element'.
Child html-webpack-plugin for "index.html":
         Asset     Size  Chunks  Chunk Names
    index.html  26.5 kB       0
       [0] ./node_modules/html-webpack-plugin/lib/loader.js!./src/index.html 222 bytes {0} [built]
webpack: Failed to compile.

我无法找到解决方案。

Answer 1

我不时会看到@types版本与库版本不相符的事情。我克隆了样板项目，并使用上面的package.json，我遇到了同样的错误。我还在构建日志中看到了这个：

ERROR in [at-loader] ./node_modules/@types/react-redux/index.d.ts:143:22
    TS2451: Cannot redeclare block-scoped variable 'connect'.

这使@types/react-redux立即成为嫌疑人。 Version 5.0.10 was published less than two weeks ago

果然，如果我将@types/react-redux依赖关系调到版本5.0.9，那么该项目对我来说没问题。

TS1238升级后做出反应16

1 个答案: