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

Question

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

asp.netasp.net-mvctypescriptwebpackdefinitelytyped

30

我对使用TypeScript和Webpack还比较新，但不幸的是，我的类型声明一直存在问题，我似乎无法解决。

简而言之，我的项目是一个ASP.NET MVC React应用程序，它使用NPM、TypeScript和Webpack来管理JavaScript依赖项。我遇到的问题是，尽管我的项目可以成功编译，但我有超过180个错误，看起来像这样。

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和React在ASP.NET TypeScript中解决这个问题吗？

编辑：我还尝试更改我的tsconfig.json文件以删除'lib'引用（假设我可以使用Polyfill）至 "lib": []。然而问题仍然存在。

- Maxim Gershkovich

你在“转到定义”中找到的global.d.ts文件的完整路径是什么？假设这些来自React typings，看起来你可能安装了两个不兼容的React typings副本。 - Matt McCutchen

嗨，马特，感谢您的回复。完整路径为C：\ blah \ blah \ myproject \ node_modules \ @ types \ react和C：\ Users \ Max \ AppData \ Local \ Microsoft \ TypeScript \ 3.0 \ node_modules \ @ types \ react。现在我可以看到问题似乎是我的node_modules文件夹正在下载react类型。如果我从node_modules中删除该文件夹并重新启动，则似乎可以解决问题，但问题在于我没有看到任何地方添加了对react typings的引用。 - Maxim Gershkovich

5个回答

11

当你有一个依赖项和一个子模块有相同的依赖项但版本不同时，就会出现这个错误。解决这个问题的正确方法是在你的 package.json 中包含一个 "resolutions" 部分。下面的例子解释了如何使用 "resolutions"：

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/

注：该网页提供有关Yarn软件包管理器的“版本解析选择”功能的详细信息。

- alvaropaco

6

我找到了以下这个github问题，我很确定它确定了你所面对的问题的根本原因：https://github.com/DefinitelyTyped/DefinitelyTyped/issues/25145 因此，你将会得到@types/react版本16.3.9和@types/react-dom版本16.0.5，因为你明确地请求了那些版本。但是，@types/react-dom列出了一个依赖于@types/react的依赖关系，如下所示："@types/react": "*"。

这意味着“@types/react的最新版”，因此它会安装包的另一个版本。

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

有两种方法可以解决这个问题:

在您的package.json中更新@types/react包的最新版本
添加一个resolutions部分到您的package.json文件中，告诉Yarn以不同的方式解决依赖项。

- Zze

3

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

运行 '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"
  ]
}

这似乎解决了错误。

- Maxim Gershkovich

如果有人想提供更详细的答案，我会感激对于为什么在我的 node_modules 文件夹中会得到一个 @types/react 包引用，即使它没有在 package.json 中声明。我正在使用 Visual Studio 2017，想知道这是否是 IDE 做了一些意外的事情，而不是 npm。 - Maxim Gershkovich

试试 yarn why @types/react :) - user1034533

3

在你的项目中，不同的包安装了不同版本的@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"
  }
}

- Hinrich

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Elias · Accepted Answer

13

在我的情况下，向tsconfig.json的compilerOptions提供"skipLibCheck": true解决了问题。

- Elias

20

虽然这样做会隐藏错误，但实际上并没有修复它。它只是关闭了所有类型声明文件的Typescript检查。这对于某些人来说可能不是问题，但如果你的源代码中有 .d.ts 文件，它们将不再受到检查，这可能会在以后造成更大的问题。 - AegisToast