使用复杂的 .d.ts 文件 (chrome-app.d.ts)

Posted 2023-03-13

【中文标题】使用复杂的 .d.ts 文件 (chrome-app.d.ts)

【英文标题】：Using a complex .d.ts file (chrome-app.d.ts)

【发布时间】：2016-05-07 22:09:45

【问题描述】：

大多数 .d.ts 文件都易于使用，例如 jQuery.d.ts。但是现在我遇到了 chrome-app.d.ts 并且不清楚（对我来说！）如何导入这个类型文件。 chrome-app.d.ts 包含一系列模块定义，每个都包含接口和导出的函数。这是一个片段：

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[];

等等，一共七个模块。模块名称不加引号。没有***出口申报。

如何在我的 ts 中使用（即导入）这个定义文件？我想使用 chrome.app.window.get() 等等，与 Goog 文档中的 JS 定义保持一致。所以回答Using a Typescript .d.ts file that doesn't declare a module 几乎可以解决我的问题。在该解决方案中，使用带引号的模块名称添加到补充 .d.ts 文件：

declare module 'chrome.app.runtime'  export = chrome.app.runtime; 

我确实可以使用这个：

import chromeAppRuntime = require('chrome.app.runtime');

但我不能用这个：

import chrome.app.runtime = require('chrome.app.runtime');

这样是否可以并保留工具链：

import fooBar = require('chrome.app.runtime');
var chrome = app: runtime: fooBar;

有没有更简单的:)

【问题讨论】：

看到这个问题，我认为它有最好的答案：***.com/questions/43655106/…

【参考方案1】：

chrome 对象是一个全局命名空间对象，而不是某个外部模块。这个chrome-app.d.ts 文件描述了存在于 Chrome 扩展范围内的全局对象。它使用（不鼓励/弃用）module 关键字，这与较新版本的 TypeScript 中不太容易混淆的namespace 关键字相同。换句话说，这个 d.ts 文件是在全局范围内声明命名空间对象。

要使用这个 d.ts 文件，您不需要导入它，而是将它与您自己的代码一起直接传递给编译器：

tsc my/extension.ts chrome-app.d.ts

然后，您的代码将直接使用 chrome 对象，就像您在 DOM 中运行的脚本的全局范围内直接使用 window 或 document 一样。 （TypeScript 编译器在运行时隐式包含捆绑的 lib.d.ts，这会暴露 DOM API。）

【讨论】：

谢谢，这行得通。模块的东西是一个挑战:)