如何在 angular-cli 1.0.1 应用程序中使用 chrome-app.d.ts 类型？答案

【问题标题】：How to use chrome-app.d.ts type in angular-cli 1.0.1 app?如何在 angular-cli 1.0.1 应用程序中使用 chrome-app.d.ts 类型？
【发布时间】：2017-09-25 02:10:48
【问题描述】：

我已安装 @types/chrome 并将其添加到 tsconfig.app.json

"types": [
  "chrome"
]

但是当我在组件中使用chrome.app 时，它会显示错误：

“typeof chrome”类型上不存在属性“app”

@types/chrome 文件夹包含 chrome-app.d.ts 是我需要的文件，我该如何参考这个

来源https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/chrome

【问题讨论】：

标签： angular typescript angular-cli definitelytyped

【解决方案1】：

由于此类型定义模块的创建者选择不在@types/chrome 模块的index.d.ts 文件中包含chrome.app.* 定义，而是将它们分离到chrome-app.d.ts 中，因此您需要明确引用它在使用这些 API 的文件中：

/// <reference types="chrome/chrome-app"/>

请注意，根据 TypeScript 中三斜杠指令的文档，这必须位于文件的顶部：

https://www.typescriptlang.org/docs/handbook/triple-slash-directives.html

还请注意，不需要在您的 tsconfig.json 文件中添加 "types": ["chrome"] 引用，因为最新版本的 TypeScript 编译器应该自动导入在node_modules/@types 中找到的所有类型定义模块。通过将此添加到您的配置中，您是在告诉它仅导入该模块。有关这方面的更多信息，您可以参考配置文档：

https://www.typescriptlang.org/docs/handbook/tsconfig-json.html

【讨论】：

【解决方案2】：

现在（2018 年 6 月）（Angular 6）只是 Angular CLI 的更新，您可以简单地执行以下操作：
npm i @types/chrome
错误就会消失。

【讨论】：

有时在克隆 repo 时，npm i 并不能解决问题。由于某种原因，我不得不再次运行npm i @types/chrome，然后TS喜欢它。