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

Question

我对使用TypeScript和Webpack相当陌生，不幸的是，我的类型声明总是遇到一个问题，我似乎无法解决这些问题。

简单地说，我的项目是一个ASP.NET MVC React应用程序，它使用NPM、TypeScript和Webpack来管理JavaScript依赖项。我遇到的问题是，虽然我的项目可以成功编译，但我在180 errors上的情况如下所示。

TS2717 (TS)后续属性声明必须具有相同的类型。属性'webview‘必须是'DetailedHTMLProps'，但是这里有'DetailedHTMLProps

下面是错误控制台的图片：

​

现在，如果单击类型并按“Go to definition”来更仔细地查看，我可以清楚地看到，我的项目有两个引用定义为相同类型，在这里可见：

​

​

问题是，这两个文件似乎都是我的项目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‘引用(假设我可以使用一个多边形)到"lib"：[]。但问题仍然存在。。

Answer 1

向tsconfig.json compilerOptions提供tsconfig.jsoncompilerOptions解决了我的问题

Answer 2

我发现了以下github问题，我非常肯定地指出了您所面临问题的根源：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25145

因此，您将在版本16.3.9处得到@type/react，在版本16.0.5时得到@type/ get dom，因为您明确地要求这些类型。但是，@types/react-dom列出了@type/react的依赖项如下："@types/react": "*"将其解释为“@types/react的最新版本”，因此它安装了包的另一个版本。因此，您将同时使用v16.3.9和v16.3.12版本的类型包，这将导致错误。我知道有两种方法可以解决这个问题：

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

Answer 3

当您在不同版本中具有相同依赖项的依赖项和子模块时，会发生此错误。解决这个问题的正确方法是在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/