从哪里开始......我使用create-react-app生成启动器reactjs-redux-typescript-webpack-donetcore应用程序。在构建期间，它会抛出许多看似类似的错误 - 反应类型不匹配。生成的代码似乎与我在线查找的其他示例一致，因此我不清楚错误或如何解决这些错误。我将列出相应的配置文件，有问题的tsx文件和第一个错误（因为它对其他tsx文件很常见）。
我认为这个问题与新的reactjs重写（v16）有关，因为我对生成的代码存在不兼容问题，因此我使用react-codemod迁移实用程序对代码库 - 没有修改过的文件。
提示使用-d进行干运行
与此同时，我会阅读tsx / jsx并查看是否有任何咔嗒声，因为所有的反应都是反应/ /打字稿对我而言是新的。
webpack -d --config webpack.config.js --colors --display-error-details
"@types/classnames": "2.2.3",
"@types/history": "4.6.0",
"@types/react": "^16.0.10",
"@types/react-dom": "16.0.0",
"@types/react-hot-loader": "3.0.4",
"@types/react-redux": "5.0.10",
"@types/react-router": "4.0.15",
"@types/react-router-dom": "4.0.8",
"@types/react-router-redux": "5.0.8",
"@types/webpack": "3.0.13",
"@types/webpack-env": "1.13.1",
"aspnet-prerendering": "^3.0.1",
"aspnet-webpack": "^2.0.1",
"aspnet-webpack-react": "^3.0.0",
"babel-preset-env": "^1.6.0",
"history": "4.7.2",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-dom": "16.0.0",
"react-hot-loader": "3.0.0-beta.7",
"react-redux": "5.0.6",
"react-router-dom": "4.2.2",
"react-router-redux": "5.0.0-alpha.6",
"redux": "3.7.2",
"redux-logger": "^3.0.6",
"redux-thunk": "2.2.0",
"style-loader": "0.19.0",
"typescript": "^2.5.3",
"webpack": "3.6.0",
"webpack-merge": "4.1.0"
"awesome-typescript-loader": "^3.2.3",
"babel-cli": "^6.26.0",
"babel-preset-react": "^6.24.1",
"react-scripts": "^1.0.14",
{
"compilerOptions": {
"baseUrl": ".",
"module": "es2015",
"moduleResolution": "node",
"target": "es5",
"jsx": "react",
"experimentalDecorators": true,
"sourceMap": true,
"skipDefaultLibCheck": true,
"strict": true,
"lib": ["es6", "dom"],
"types": ["webpack-env"]
},
"exclude": [
"bin",
"node_modules"
]
}
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AppContainer> & Readonly<{ children?: ReactNode; }...'.
Type '{ children: Element; }' is not assignable to type 'Readonly<AppContainerProps>'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'ReactElement<any> | undefined'.
Type 'Element' is not assignable to type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2322: Type '{ children: Element; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<AppContainer> & Readonly<{ children?: ReactNode; }...'.
Type '{ children: Element; }' is not assignable to type 'Readonly<AppContainerProps>'.
Types of property 'children' are incompatible.
Type 'Element' is not assignable to type 'ReactElement<any> | undefined'.
Type 'Element' is not assignable to type 'ReactElement<any>'.
Types of property 'type' are incompatible.
Type 'string | React.ComponentClass<any> | React.StatelessComponent<any>' is not assignable to type 'string | React.ComponentClass<any> | React.StatelessComponent<any>'. Two different types with this name exist, but they are unrelated.
Type 'ComponentClass<any>' is not assignable to type 'string | ComponentClass<any> | StatelessComponent<any>'.
Type 'ComponentClass<any>' is not assignable to type 'StatelessComponent<any>'.
Type 'ComponentClass<any>' provides no match for the signature '(props: any, context?: any): ReactElement<any> | null'.
ERROR in [at-loader] ./ClientApp/boot-client.tsx:36:9
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-server.tsx:28:24
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/boot-server.tsx:40:38
TS2345: Argument of type 'Element' is not assignable to parameter of type 'ReactElement<any>'.
ERROR in [at-loader] ./ClientApp/components/Counter.tsx:31:3
TS2345: Argument of type 'typeof Counter' is not assignable to parameter of type 'ComponentType<CounterState & { increment: () => IncrementCountAction; decrement: () => DecrementC...'.
Type 'typeof Counter' is not assignable to type 'StatelessComponent<CounterState & { increment: () => IncrementCountAction; decrement: () => Decre...'.
Type 'typeof Counter' provides no match for the signature '(props: CounterState & { increment: () => IncrementCountAction; decrement: () => DecrementCountAction; } & { children?: ReactNode; }, context?: any): ReactElement<any> | null'.
import './css/site.css';
import 'bootstrap';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { AppContainer } from 'react-hot-loader';
import { Provider } from 'react-redux';
import { ConnectedRouter } from 'react-router-redux';
import { createBrowserHistory } from 'history';
import configureStore from './configureStore';
import { ApplicationState } from './store';
import * as RoutesModule from './routes';
let routes = RoutesModule.routes;
// Create browser history to use in the Redux store
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href')!;
const history = createBrowserHistory({ basename: baseUrl });
// Get the application-wide store instance, prepopulating with state from the server where available.
const initialState = (window as any).initialReduxState as
ApplicationState;
const store = configureStore(history, initialState);
function renderApp() {
// This code starts up the React app when it runs in a browser. It sets up the routing configuration
// and injects the app into a DOM element.
ReactDOM.render(
<AppContainer>
<Provider store={ store }>
<ConnectedRouter history={ history } children={ routes } />
</Provider>
</AppContainer>,
document.getElementById('react-app')
);
}
renderApp();
// Allow Hot Module Replacement
if (module.hot) {
module.hot.accept('./routes', () => {
routes = require<typeof RoutesModule>('./routes').routes;
renderApp();
});
}
import * as React from 'react';
import { Link, RouteComponentProps } from 'react-router-dom';
import { connect } from 'react-redux';
import { ApplicationState } from '../store';
import * as CounterStore from '../store/Counter';
import * as WeatherForecasts from '../store/WeatherForecasts';
type CounterProps = CounterStore.CounterState & typeof CounterStore.actionCreators & RouteComponentProps<{}>;
class Counter extends React.Component<CounterProps, {}> {
public render() {
return (
<div>
<h1>Counter</h1>
<p>This is a simple example of a React component.</p>
<p>Current count: <strong>{this.props.count}</strong></p>
<button className="btn btn-default" onClick={() => { this.props.increment() }}>Increment</button>
<button className="btn btn-default" onClick={() => { this.props.decrement() }}>Decrement</button>
</div>
);
}
}
// Wire up the React component to the Redux store
export default connect(
(state: ApplicationState) => state.counter, // Selects which state properties are merged into the component's props
CounterStore.actionCreators // Selects which action creators are merged into the component's props
)(Counter);
答案 0 :(得分：1)
This question使用的是node-check-updates，而不是react-codemod，但我相信此处也适用相同的修补程序。
如果将@types/react-redux版本更改为5.0.9，项目至少应该编译。
答案 1 :(得分：0)
如果您使用纱线，那么只需输入命令
即可yarn upgrade @types/react-redux@5.0.9
它对我有用。查看并了解他们如何在@types/react-redux@5.0.10中修复它。希望这有帮助。