我很擅长使用TypeScript和Webpack,遗憾的是我的类型声明仍然遇到了我似乎无法解决的问题。
简而言之,我的项目是一个ASP.NET MVC React应用程序,它使用NPM,TypeScript和Webpack来管理JavaScript依赖项。我遇到的问题是,虽然我的项目可以成功编译,但我已经超过180 errors
,看起来像这样。
TS2717 (TS) Subsequent property declarations must have the same type. Property 'webview' must be of type 'DetailedHTMLProps<WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>', but here has type 'DetailedHTMLProps<WebViewHTMLAttributes<HTMLWebViewElement>, HTMLWebViewElement>'.
现在,如果我仔细查看类型并按“转到定义”,我可以清楚地看到我的项目有两个参考定义为与此处可见的相同类型:
问题是这两个文件似乎都是我的项目tsconfig.json文件的要求,因为没有它们就不能编译。
我的tsconfig.json看起来像这样:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"lib": [ "es5", "es2017", "dom"]
"removeComments": true,
"typeRoots": [
"/node_modules/@types",
"/Types/"
]
},
"compileOnSave": false,
"exclude": [
"/node_modules/",
"/bin",
"/obj"
]
}
我的package.json文件如下所示:
{
"name": "fungalai",
"version": "1.0.0",
"dependencies": {
"react": "16.4.2",
"react-dom": "16.4.2"
},
"devDependencies": {
"@types/flux": "3.1.7",
"axios": "^0.18.0",
"deep-diff": "^1.0.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"create-react-class": "^15.6.3",
"expose-loader": "^0.7.5",
"jszip": "^3.1.5",
"flux": "3.1.3",
"ts-loader": "^4.3.0",
"typescript": "3.0.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.4"
}
}
现在我怀疑这个问题与我的tsconfig.json文件"lib": [ "es5", "es2017", "dom"]
中的行有关,但是如果我删除任何这些引用,我的项目将无法编译,因为很明显我的某些类型在这些库引用中定义。
任何人都可以帮助指导我如何解决此问题,并正确引用DOM和ASP.NET TypeScript中的React?
编辑:我也尝试更改我的tsconfig.json文件以删除'lib'引用(假设我可以使用Polyfill)来“lib”:[]。然而问题仍然存在。
由于上面的反馈,我相信我找到了解决问题的方法。
package.json
文件中创建@types/react
包的手动引用。
“devDependencies”:{“@ types / react”:“16.4.13”}我的最终package.json文件看起来像这样:
{
"name": "fungalai",
"version": "1.0.0",
"dependencies": {
"react": "16.4.2",
"react-dom": "16.4.2"
},
"devDependencies": {
"@types/flux": "3.1.7",
"@types/react": "16.4.13",
"axios": "^0.18.0",
"deep-diff": "^1.0.1",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.4",
"babel-polyfill": "^6.26.0",
"babel-preset-es2015": "6.24.1",
"babel-preset-react": "6.24.1",
"babel-preset-stage-0": "^6.24.1",
"create-react-class": "^15.6.3",
"expose-loader": "^0.7.5",
"jszip": "^3.1.5",
"flux": "3.1.3",
"ts-loader": "^4.3.0",
"typescript": "3.0.1",
"uglifyjs-webpack-plugin": "^1.2.5",
"webpack": "^4.8.3",
"webpack-cli": "^2.1.4"
}
}
和tsconfig.json这样:
{
"compilerOptions": {
"module": "commonjs",
"moduleResolution": "node",
"target": "es5",
"sourceMap": true,
"jsx": "react",
"lib": [ "es6", "dom" ],
"removeComments": true,
"typeRoots": [
"/node_modules/@types",
"/Types/"
]
},
"compileOnSave": false,
"exclude": [
"/node_modules/",
"/bin",
"/obj"
]
}
这似乎解决了错误。