- VSCode Version: Code 1.12.2 (19222cd, 2017-05-10T13:16:25.899Z)
- OS Version: Linux x64 4.4.0-71-generic
- Extensions:
| Extension |
Author |
Version |
| vscode-generate-getter-setter |
DSKWRK |
0.4.2 |
| EditorConfig |
EditorConfig |
0.9.3 |
| material-icon-theme |
PKief |
2.0.6 |
| code-settings-sync |
Shan |
2.7.0 |
| html-snippets |
abusaidm |
0.1.0 |
| vscode-color |
anseki |
0.4.1 |
| one-monokai |
azemoh |
0.2.4 |
| vscode-eslint |
dbaeumer |
1.2.11 |
| githistory |
donjayamanne |
0.2.0 |
| vscode-babel-coloring |
dzannotti |
0.0.4 |
| vscode-html-css |
ecmel |
0.1.4 |
| tslint |
eg2 |
0.15.0 |
| vscode-npm-script |
eg2 |
0.1.9 |
| vscode-JS-CSS-HTML-formatter |
lonefy |
0.2.3 |
| debugger-for-chrome |
msjsdiag |
3.1.1 |
| vscode-icons |
robertohuertasm |
7.7.0 |
| JavaScriptSnippets |
xabikos |
1.4.0 |
| ReactSnippets |
xabikos |
1.3.0 |
| Material-theme |
zhuangtongfa |
2.8.0 |
Error occurs on component={Counter} when trying to attach a component to the Route.
The problem:
Counter has it's props and state set to <any, any>. Webpack with awesome-typescript-loader compiles this code without any errors.
The way to get rid of error message is to pass Counter as any or Counter as React.ComponentClass<any>
Why does VS Code and Webpack compilers have different behaviour? How can it be fixed?
VS Code error message:
severity: 'Error'
message: 'Type '{ path: "/counter"; component: ComponentClass<{}>; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Route> & Readonly<{ children?: ReactNode; }> & Rea...'.
Type '{ path: "/counter"; component: ComponentClass<{}>; }' is not assignable to type 'Readonly<RouteProps>'.
Types of property 'component' are incompatible.
Type 'ComponentClass<{}>' is not assignable to type 'StatelessComponent<RouteComponentProps<any> | undefined> | ComponentClass<RouteComponentProps<any...'.
Type 'ComponentClass<{}>' is not assignable to type 'ComponentClass<RouteComponentProps<any> | undefined>'.
Type '{}' is not assignable to type 'RouteComponentProps<any> | undefined'.
Type '{}' is not assignable to type 'RouteComponentProps<any>'.
Property 'match' is missing in type '{}'.'
at: '22,13'
source: 'ts'
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import Counter from './counter';
class App extends React.Component<any, any> {
render() {
return (
<Router>
<div>
<ul>
<li><Link to="/counter">Counter</Link></li>
</ul>
<Route path="/counter" component={Counter} />
</div>
</Router>
);
}
package.json
"devDependencies": {
"@types/node": "^7.0.18",
"@types/react": "^15.0.24",
"@types/react-dom": "^15.5.0",
"@types/react-hot-loader": "^3.0.1",
"@types/react-redux": "^4.4.40",
"@types/react-router": "^4.0.9",
"@types/react-router-dom": "^4.0.4",
"@types/redux": "^3.6.0",
"@types/webpack": "^2.2.15",
"@types/webpack-dev-server": "^1.12.6",
"@types/webpack-env": "^1.13.0",
"awesome-typescript-loader": "^3.1.3",
"css-loader": "^0.28.1",
"extract-text-webpack-plugin": "^2.1.0",
"html-webpack-plugin": "^2.28.0",
"jest": "^20.0.3",
"react-hot-loader": "next",
"style-loader": "^0.17.0",
"ts-jest": "^20.0.4",
"tslint": "^5.2.0",
"tslint-react": "^3.0.0",
"typescript": "^2.3.2",
"webpack": "^2.5.1",
"webpack-dashboard": "^0.4.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"react": "^15.5.4",
"react-dom": "^15.5.4",
"react-redux": "^5.0.5",
"react-router": "^4.1.1",
"react-router-dom": "^4.1.1",
"redux": "^3.6.0"
}
}
Error occurs on
component={Counter}when trying to attach a component to the Route.The problem:
Counterhas it'spropsandstateset to<any, any>. Webpack with awesome-typescript-loader compiles this code without any errors.The way to get rid of error message is to pass
Counter as anyorCounter as React.ComponentClass<any>Why does VS Code and Webpack compilers have different behaviour? How can it be fixed?
VS Code error message:
package.json