Understanding and using .d.ts files can be straightforward for most, like jQuery.d.ts. However, I recently encountered chrome-app.d.ts and found it a bit puzzling on how to import this typings file. In chrome-app.d.ts, there are various module definitions with interfaces and exported functions. Here is a snippet:
declare module chrome.app.runtime {
interface LaunchData {
id?: string;
......
......
}
declare module chrome.app.window {
interface ContentBounds {
left?: number;
......
......
export function current(): AppWindow;
export function get(id: string): AppWindow;
export function getAll(): AppWindow[];
}
There are a total of seven modules without quoted names and no top level export declaration.
How can I import and use this definition file in my TypeScript code? I want to access chrome.app.window.get() and similar functions based on the JavaScript definitions in the Google documentation. I found a helpful workaround in a Stack Overflow answer Using a Typescript .d.ts file that doesn't declare a module. The solution suggests adding a supplementary .d.ts file with a quoted module name:
declare module 'chrome.app.runtime' { export = chrome.app.runtime; }
And I was able to successfully import it like this:
import chromeAppRuntime = require('chrome.app.runtime');
However, I faced an issue with this syntax:
import chrome.app.runtime = require('chrome.app.runtime');
So, would this workaround be acceptable to sustain the tool chain:
import fooBar = require('chrome.app.runtime');
var chrome = {app: {runtime: fooBar}};
Is there a simpler solution out there? :)