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

在你的项目中，不同的包安装了不同版本的@types/react。在您的package.json 中，您可以为这些类型指定要解析的特定版本，例如

// package.json
{
  // ...
  "dependencies": {
    "react": "16.14.0",
    "react-dom": "16.14.0",
    // ...
  },
  "devDependencies": {
    "@types/react": "^16.14.0",
    "@types/react-dom": "^16.14.0",
    // ...
  },
  "resolutions": {
    "@types/react": "^16.14.0"
  }
}

Answer 2

将"skipLibCheck": true 提供给tsconfig.json compilerOptions 解决了我的问题

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

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

所以你会在版本 16.3.9 和 @types/react-dom 在版本 16.3.9 中获得 @types/react-dom 在版本 16.0.5，因为你明确要求这些。但是，@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 中添加一个 resolutions 部分，告诉 Yarn 以不同的方式解决依赖关系。

Answer 5

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

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

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

   “开发依赖”：{ “@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"
  ]
}

这似乎解决了错误。