在项目中手动导入之前，VSCode IntelliSense 不建议使用 Angular 模块

Question

首先，您必须了解我正在从 IntelliJ 切换到 VSCode（也许我对 IntelliJ 寻找模块的方式太熟悉了）。

我将主要使用 VSCode 来开发由 Angular CLI 生成的 Angular 应用程序。

从一个新的 CLI 生成的应用程序开始，在新的 VSCode 安装中打开项目（删除了设置和所有扩展）我意识到我需要在 VSCode IntelliSense 意识到它们之前手动导入任何 Angular 模块。

示例：假设我需要创建 2 个 Angular 服务。两者都需要 HttpClient 来获取数据。在第一个中，我更改构造函数属性以注入它。当按下 Quick Fix 快捷方式 (CTRL + .) 时，我只得到一个建议，即从 selenium-webdriver 导入 HttpClient。

还是在第一个服务中，我手动添加了Angular HttpClient import：

import { HttpClient } from '@angular/common/http';

转到第二个服务，更改构造函数以相同的方式添加 httpClient 属性，现在按下 Quick Fix 快捷方式时我得到了更多结果：

这是预期的行为还是我做错了什么？已经在 3 个不同的系统上尝试过这个，结果相同。我期待 IntelliSense 对 HttpClient 上下文有一点删除智能。

这对于任何模块都是一样的，这意味着您需要在 VSCode 意识到它之前手动导入一次。

Answer 1

到目前为止，我找到的唯一解决方案是将 Angular 包的路径添加到typeRootsof tsconfig.json. 下面是一个例子：

"typeRoots": ["node_modules/@types", "node_modules/@angular"]

这样，除了node_modules/@types，TypeScript 查看node_modules/@angular文件夹及其子文件夹中的类型定义。

根据打字稿文档：

如果typeRoots指定，则只包含下面的包typeRoots。

我实际上不知道为什么Angular 文档中没有提及此事，这是正确的，但在键入发现方面听起来有点不完整：

许多库在它们的 npm 包中包含定义文件，TypeScript 编译器和编辑器都可以在其中找到它们。Angular 就是这样一个库。任何 Angular 应用程序的 node_modules/@angular/core/ 文件夹都包含几个描述 Angular 部分的 d.ts 文件。

您无需执行任何操作即可获取包含 d.ts 文件的库包的类型文件。Angular 包已经包含了它们。