PhpStorm 抱怨找不到类型，但仍然可以打开定义它的文件答案

【问题标题】：PhpStorm complains that a type is not found but still can open the file defining itPhpStorm 抱怨找不到类型，但仍然可以打开定义它的文件
【发布时间】：2019-03-12 20:50:05
【问题描述】：

我有一个使用 PhpStorm 用 TypeScript 编写的 AngularJS 项目。使用 Webpack 编译时，出现以下错误：

错误:(42, 43) TS2694:Namespace 'angular' 没有导出的成员 'angularFileUpload'。

所以某处有问题。但让我烦恼的是，PhpStorm 仍然能够解析类型并打开定义它的文件，同时抱怨无法解析类型：

这是一个显示行为的动画 gif：

我对另一个库也有同样的问题。

事实上，尝试扩展 ng 命名空间的类型似乎在稍后被某些东西覆盖，我不知道在哪里。

我已包含 @types/ng-file-upload 并在我的 tsconfig 中定义了根类型，如动画 gif 所示。

提前感谢您能给我的任何建议。

编辑：

这是我的package.json 文件的内容：

{
  "name": "...",
  "version": "0.0.1",
  "description": "...",
  "repository": {
    ...
  },
  "scripts": {
    "gulp": "gulp build --theme=default",
    "gulp:prod": "gulp build --theme=default --env=prod",
    "gulp:watch": "gulp build --theme=default --watch",
    "gulp:watch:prod": "gulp --theme=default --watch --env=prod",
    "webpack:native:watch": "webpack --config build/webpack/config/root.config.ts --env.app=native --env.target=julien-localhost --watch",
    "webpack:native:prod": "webpack --config build/webpack/config/root.config.ts --env.app=native --env.target=production --env.env=prod",
    "webpack:angularjs/admin:watch": "webpack --config build/webpack/config/root.config.ts --env.app=angularjs/admin --env.target=julien-localhost --watch",
    "webpack:angularjs/admin:prod": "webpack --config build/webpack/config/root.config.ts --env.app=angularjs/admin --env.target=production --env.env=prod"
  },
  "dependencies": {
    "angular": "^1.6.9",
    "angular-animate": "^1.6.9",
    "angular-aria": "^1.6.9",
    "angular-clipboard": "~1.6.2",
    "angular-local-storage": "~0.7.1",
    "angular-material": "^1.1.9",
    "angular-messages": "^1.6.9",
    "angular-moment-picker": "^0.10.2",
    "angular-resource": "^1.6.9",
    "angular-sanitize": "^1.6.9",
    "angular-translate": "~2.17.0",
    "angular-ui-notification": "^0.3.6",
    "angular-ui-router.statehelper": "~1.3.1",
    "bootstrap": "^4.1.3",
    "font-awesome": "~4.7.0",
    "inversify": "^4.13.0",
    "jquery": "^3.3.1",
    "jquery-backstretch": "^2.1.16",
    "jquery-mousewheel": "^3.1.13",
    "jquery-ui": "^1.12.1",
    "lodash": "^4.17.10",
    "mainloop.js": "^1.0.4",
    "malihu-custom-scrollbar-plugin": "^3.1.5",
    "moment": "~2.20.1",
    "moment-timezone": "^0.5.14",
    "ng-file-upload": "~12.2.13",
    "parsleyjs": "^2.8.1",
    "particles.js": "^2.0.0",
    "q": "^1.5.1",
    "raven-js": "^3.26.4",
    "reflect-metadata": "^0.1.12",
    "satellizer": "^0.15.5",
    "scrollmonitor": "^1.2.4",
    "toastr": "^2.1.4"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.3.1",
    "@types/angular": "~1.6.43",
    "@types/angular-mocks": "^1.5.11",
    "@types/angular-route": "^1.3.4",
    "@types/angular-ui-notification": "0.0.4",
    "@types/angular-ui-router": "^1.1.40",
    "@types/es6-promise": "^3.3.0",
    "@types/jquery": "^3.3.6",
    "@types/lodash": "^4.14.104",
    "@types/modernizr": "^3.5.2",
    "@types/ng-file-upload": "~12.2.2",
    "@types/node": "^9.6.34",
    "@types/q": "^1.5.1",
    "@types/reflect-metadata": "^0.1.0",
    "@types/source-map": "~0.5.7",
    "@types/uglify-js": "^2.6.30",
    "@types/webpack-env": "^1.13.6",
    "@uirouter/angularjs": "^1.0.15",
    "awesome-typescript-loader": "^3.4.1",
    "browser-sync": "~2.23.6",
    "browser-sync-webpack-plugin": "^2.0.1",
    "chalk": "^2.3.1",
    "circular-dependency-plugin": "^4.4.0",
    "clone": "2.1.2",
    "copy-webpack-plugin": "~4.4.1",
    "force-case-sensitivity-webpack-plugin": "^0.2.1",
    "gulp-angular-embed-templates": "^2.3.0",
    "gulp-autoprefixer": "^5.0.0",
    "gulp-compass": "^2.1.0",
    "gulp-ng-annotate": "^2.1.0",
    "gulp-yaml-packages": "~1.0.15",
    "html-webpack-plugin": "~2.30.1",
    "loader-utils": "^1.1.0",
    "ngtemplate-loader": "~2.0.1",
    "node-neat": "^2.0.0-beta.0",
    "raw-loader": "0.5.1",
    "ts-loader": "~3.5.0",
    "ts-node": "~5.0.0",
    "tslib": "^1.9.0",
    "tslint": "~5.9.1",
    "tslint-loader": "~3.5.3",
    "typescript": "^2.9.2",
    "url-loader": "0.6.2",
    "webpack": "^3.11.0",
    "webpack-merge": "~4.1.1",
    "webpack-strip-block": "github:jballant/webpack-strip-block"
  }
}

【问题讨论】：

请给我看看你的 package.json 文件内容
旁注：注意完整的错误信息（实际信息之前的代码）——上面写着 TS2694... 这意味着它是由 TypeScript 服务生成的，而不是 PhpStorm 本身。 .
是的，我知道，这就是我说When compiling with Webpack, I get the following error 的原因。我没有找到错误的解决方案，这是第一件事。但引发我的问题的是 phpstorm 的行为。但无论如何，我真的被错误困住了。如果你有一个想法..
请参阅stackoverflow.com/questions/46666667/… - 您的问题可能与安装了多个版本的角度类型有关
感谢您的链接，我在发布一个新问题之前做了一些研究，我已经看到了这个问题。这就是为什么我说In fact, it seems that typings trying to extend the ng namespace are overridden by something later on, and I don't find where.。我花了很多时间试图删除一些依赖项，但没有运气。我怀疑 satellizer 是问题的原因，因为他们在 npm 模块中定义了角度类型，但即使在删除依赖项后我仍然会收到错误...

标签： angularjs typescript phpstorm webstorm

【解决方案1】：

我找到了问题...

我的tsconfig.json 文件包含：

{
    "compilerOptions": {
        [...]
        "types": ["reflect-metadata", "webpack-env"]
    }
}

这就是问题所在，这将编译器包含的类型限制为选项中定义的类型：

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html#types-typeroots-and-types

如果您处于同样的情况，您还需要再做一次检查。

如果这可以帮助某人。

【讨论】：