Typescript 声明在不同的依赖项中必须有相同的变量问题

Question

我有一个使用 .NET Core 和 ReactJS 实现的项目。最近，由于在 .tsx 文件中添加了一个新组件，我更新了一些包。为了在@material-ui/core 中添加Container 组件，它的版本已从 "@material-ui/core": "^3.0.3" 更新到“@material-ui/core”：“^4.1.3”。 Unknown 在 3.0.0 版本之后提供了 typescript 中的类型，然后我将 typescript 版本从 “typescript”：“^2.8.1” 到 “typescript”：“^3.0.0”。在进行这些更改之前，显示页面没有问题。呈现页面时发生错误。

我已尝试再次更改版本，但它们仍然不兼容。

我的 package.json 文件在后面添加。

{
  "name": "bookstore",
  "private": true,
  "version": "0.1.0",
  "scripts": {
    "start": "ASPNETCORE_ENVIRONMENT=Development dotnet run",
    "startlive": "ASPNETCORE_ENVIRONMENT=Development dotnet watch run",
    "startWindows": "dotnet run environment=development",
    "startliveWindows": "dotnet watch run environment=development"
  },
  "devDependencies": {
    "@types/history": "^4.6.2",
    "@types/react": "^16.4.13",
    "@types/react-autosuggest": "^9.3.6",
    "@types/react-dom": "^16.0.7",
    "@types/react-hot-loader": "^3.0.6",
    "@types/react-router": "^4.0.29",
    "@types/react-router-dom": "^4.3.0",
    "@types/webpack-env": "^1.13.5",
    "aspnet-webpack": "^2.0.1",
    "aspnet-webpack-react": "^3.0.0",
    "awesome-typescript-loader": "^3.2.1",
    "axios": "^0.18.0",
    "css-loader": "^0.28.4",
    "event-source-polyfill": "^0.0.9",
    "extract-text-webpack-plugin": "^2.1.2",
    "file-loader": "^0.11.2",
    "isomorphic-fetch": "^2.2.1",
    "json-loader": "^0.5.4",
    "prop-types": "^15.6.2",
    "react": "^16.4.1",
    "react-autosuggest": "^9.4.2",
    "react-dom": "^16.4.1",
    "react-hot-loader": "^3.0.0",
    "react-redux": "^5.0.7",
    "react-router": "^4.2.0",
    "react-router-dom": "^4.2.2",
    "redux": "^4.0.1",
    "style-loader": "^0.18.2",
    "typescript": "^3.0.0",
    "url-loader": "^0.5.9",
    "webpack": "^2.3.0",
    "webpack-hot-middleware": "^2.21.2"
  },
  "dependencies": {
    "@material-ui/core": "^4.1.3",
    "@material-ui/icons": "^3.0.1",
    "classnames": "^2.2.6"
  }
}

程序抛出的错误写在后面。

[at-loader] ./node_modules/typescript/lib/lib.dom.d.ts:8889:13 TS2403：后续变量声明必须具有相同的类型。变量 'History' 必须是 'typeof import("C:/Users/Beko/Source/Repos/BookStore/Client/node_modules/@types/history/index")' 类型，但这里有类型 '{ new (): import("C:/Users/Beko/Source/Repos/BookStore/Client/node_modules/@types/history/index");原型：import("C:/Users/Beko/Source/Repos/BookStore/Client/node_modules/@types/history/index"); }'。

编辑 10.07.2019 / 01.41 am

我的 tsconfig.json 有如下所示的“types”参数。

{
  "compilerOptions": {
    "baseUrl": ".",
    "module": "es2015",
    "moduleResolution": "node",
    "target": "es5",
    "lib": [
      "es6",
      "dom",
      "es5",
      "es2015.iterable",
      "es2015.collection",
      "es2015.symbol.wellknown",
      "es2015.promise",
      "es2015.symbol",
      "es2015.generator",
      "dom.iterable",
    ],
    "jsx": "react",
    "sourceMap": true,
    "skipDefaultLibCheck": false,
    "strict": false,
    "allowUnusedLabels": true,
    "types": [
      "webpack-env"
    ]
  },
  "exclude": [
    "typings",
    "bin",
    "node_modules"
  ]
}

Answer 1

看起来@types/history 声明了一个全局History，它的类型与lib.dom.d.ts 中的TypeScript 内置类型不同。

如果您没有使用history 包（我在您的依赖项中没有看到它），最简单的解决方案是删除对@types/history 的依赖项。

如果您正在通过隐式依赖项使用history，则可以使用tsconfig.json 中的types property 防止其类型自动添加到全局命名空间中。该属性应该只包含需要全局可用的类型包，例如webpack-env（Webpack 相关的全局变量）。因此，如果您遇到有关缺少类型的编译错误，请从那个开始并添加更多。

{
  "compilerOptions": {
    // add more entries to this array as needed
    "types": ["webpack-env"]
  }
}