typescript - How to use chrome-app.d.ts type in angular-cli 1.0.1 app?

Question

I've installed @types/chrome and add it in tsconfig.app.json

"types": [
  "chrome"
]

But when i use chrome.app in component, it show an error:

Property 'app' does not exist on type 'typeof chrome'

@types/chrome folder contains chrome-app.d.ts is a file which i need, how can I refer to this

Source https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/chrome

Answer 1

Since the creators of this typings definition module have chosen not to include the chrome.app.* definitions in the index.d.ts file of the @types/chrome module but instead separate them out into chrome-app.d.ts, you'll need to explicitly reference it in the file that uses those APIs:

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

Note that this must be at the top of the file, per the documentation for triple-slash directives in TypeScript:

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

Also note that it should not be necessary to add a "types": ["chrome"] reference in your tsconfig.json file, as the latest version of the TypeScript compiler should automatically import all typings definition modules found in node_modules/@types. By adding this to your config, you are telling it to only import that one module. For more on this, you can refer to the config docs:

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