如何将 google.visualization 类型与 Angular CLI 结合使用？

Question

我正在尝试在 Angular CLI (7.2.3) 项目中使用 Google Charts，但在输入内容时遇到问题。

首先，我使用此命令安装了类型（带或不带 -dev 标志）：

npm install --save-dev @types/google.visualization

执行此操作后，智能感知立即开始在 Visual Studio Code 中工作，并且当我创建如下简单测试时，我没有收到任何突出显示的错误：

const chartBoxStyle: google.visualization.ChartBoxStyle = {};

但是，当我尝试通过运行ng build进行构建时，出现以下错误：

错误 TS2503：找不到命名空间“google”。

我尝试将其添加到我的文件中，但没有成功：

declare const google: any;

我的 tsconfig.json 文件具有以下 typeRoots 内容，我在其中看到 google.visualization 文件夹：

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

任何帮助将不胜感激，因为我不知道如何克服这一点。

Answer 1

概括

问题在于文件"types"中的属性./src/tsconfig.app.json。

即使根./tsconfig.json文件设置"typeRoots"为["node_modules/@types"]，该文件也会通过将其自己的属性设置为空数组./src/tsconfig.app.json来禁用包含这些类型。types

解决方案

打开./src/tsconfig.app.json并进行以下两项更改之一：

• 删除该"types": []"属性；这将告诉编译器包含所有typeRoots包。

• 或者，将要使用的类型添加到"types": []"数组中。

后一个选项如下所示：

"types": [
  "google.visualization"
]

细节

ng build从文件中读取其配置./angular.json。

该./angular.json文件设置"tsConfig"为"src/tsconfig.app.json".

该./src/tsconfig.app.json文件将其"types"属性设置为空数组。

{
  "extends": "../tsconfig.json",
  "compilerOptions": {
    "outDir": "../out-tsc/app",
    "types": []  <------------------------------- empty array
  },
  "exclude": [
    "test.ts",
    "**/*.spec.ts"
  ]
}

这就是问题所在，因为正如TypeScript 文档所述：“如果指定了类型，则仅包含列出的包。”