Question

我对使用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"]中的行有关，但是如果删除这些引用中的任何引用，则我的项目将无法编译，因为显然我的某些类型已在其中定义库参考。

任何人都可以帮助我指导如何解决此问题的正确方向，并在ASP.NET TypeScript中正确引用DOM和React吗？

编辑：我还尝试过更改tsconfig.json文件，以删除“ lib”引用（假设我可以使用Polyfill）到“ lib”：[]。但是问题仍然存在。

Answer 1

我发现了以下github问题，可以肯定地确定了您所面临问题的根本原因：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25145

因此，您将在16.3.9版中获得@ types / react，在16.0.5版中获得@ types / react-dom，因为您明确要求了这些。但是，@ types / react-dom列出了对@ types / react的依赖关系，如下所示："@types/react": "*"

[this] 解释为“ @ types / react的最新版本”，因此它将安装该软件包的其他版本。

因此，您将同时使用类型包的v16.3.9和v16.3.12版本，这会导致错误。

我知道有两种解决方法：

更新到package.json中的@ types / react软件包的最新版本

在您的package.json中添加一个Resolutions部分，以告诉Yarn以不同的方式解决依赖关系。

Answer 2

由于上述反馈，我相信我已经找到解决问题的方法。

运行'npm uninstall react -g'从全局缓存中卸载react软件包。
在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"
  ]
}

这似乎已解决了错误。

Answer 3

当您有一个依赖项并且在不同版本中具有相同依赖项的子模块时，会发生此错误。解决此问题的正确方法是在您的 package.json 中加入“解决方案”部分。以下示例向您解释如何“解决”：包.json

{
  "name": "project",
  "version": "1.0.0",
  "dependencies": {
    "left-pad": "1.0.0",
    "c": "file:../c-1",
    "d2": "file:../d2-1"
  },
  "resolutions": {
    "d2/left-pad": "1.1.1",
    "c/**/left-pad": "^1.1.2"
  }
}

文档参考：https://classic.yarnpkg.com/en/docs/selective-version-resolutions/

Answer 4

向 tsconfig 编译器选项提供 "skipLibCheck": false 解决了我的问题

TypeScript-[后续属性声明必须具有相同的时间]-对相同类型定义的多个引用

4 个答案: