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

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

提供 "skipLibCheck": true解决tsconfig.json compilerOptions我的案例中的问题

Answer 2

当您在不同版本中拥有依赖项和具有相同依赖项的子模块时，会出现此错误。解决此问题的正确方法是在您的package.json. 以下示例解释了如何“解决”：package.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 3

我发现了以下 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 的最新版本”，因此它会安装该包的附加版本。

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

我知道有两种方法可以解决这个问题：

1. 更新到 package.json 中 @types/react 包的最新版本
2. 将解决方案部分添加到 package.json 中，以告诉 Yarn 以不同的方式解决依赖关系。

Answer 4

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

1. 运行“npm uninstall react -g”从全局缓存中卸载react包。

2. package.json在文件中创建对包的手动引用@types/react。

   “devDependency”：{“@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"
  ]
}

这似乎已经解决了错误。