如何扩展“Window”打字稿界面

Posted 2023-02-27

【中文标题】如何扩展“Window”打字稿界面

【英文标题】：How to extend the 'Window' typescript interface

【发布时间】：2015-09-06 17:59:36

【问题描述】：

在我的示例中，我正在尝试扩展 TS Window 界面以包含 fetch 的 polyfill。为什么不重要。问题是“我如何告诉 TS window.fetch 是一个有效的函数？”

我在运行 TS v.1.5 (IIRC) 的 VS Code v.0.3.0 中执行此操作。

在我想要使用的 TS 类文件中声明接口不起作用：

///<reference path="typings/tsd.d.ts"/>

interface Window 
  fetch:(url: string, options?: ) => Promise<any>

...
window.fetch('/blah').then(...); // TS objects that window doesn't have fetch

但是如果我在一个单独的“.d.ts”文件中声明这个相同的接口并在我的 TS 类文件中引用它就可以了。

这里是“typings/window.extend.d.ts”

///<reference path="es6-promise/es6-promise"/>
interface Window 
  fetch:(url: string, options?: ) => Promise<any>

现在我可以在我的 TS 类文件中使用它：

///<reference path="typings/window.extend.d.ts"/>
...
window.fetch('/blah').then(...); // OK

或者，我可以在我的 TS 类文件中编写一个扩展接口使用另一个名称，然后在强制转换中使用它：

interface WindowX extends Window 
  fetch:(url: string, options?: ) => Promise<any>

...
(<WindowX> window).fetch('/blah').then(...); // OK

为什么扩展界面在“d.ts”中起作用而不是原位？

我真的必须经历这些回旋吗？

【问题讨论】：

一个明确的问题.... 完成扩展接口的最佳方法是什么？我看到了这两者的优点和缺点

【参考方案1】：

当您的文件中有***import 或export（您必须在某个地方遇到此问题）时，您的文件就是一个外部模块。

在外部模块中，声明接口总是会创建新类型，而不是扩充现有的全局接口。这模仿了模块加载器的一般行为——在这个文件中声明的东西不会合并或干扰全局范围内的东西。

这种旋转的原因是，否则将无法在外部模块中定义与全局范围内同名的新变量或类型。

【讨论】：

您能否提供有关此问题的一些文档的链接？也许Declaration Merging wiki 条目需要扩展？

我确实有***的import 语句。你说的有道理，现在我明白了。但我仍然不知道这两种方法的优缺点，或者是否有更好的第三种方法。我确信扩展window 将是一个应该清楚记录的常见场景。 Declaration Merging 肯定需要详细说明...尤其是因为 interface Document 示例在我的用例中不起作用！

我们喜欢准确的打字。当他们不是时，我们讨厌他们。有一条干净的路径来扩展它们很重要。我也想知道这里的其他选择

干净的方法是将它们放在另一个文件中。没有其他方法可以表明您想在全局命名空间中声明某些内容。

可以从外部模块中扩展window 对象。在这里查看我的答案：***.com/a/40204572/274837

【参考方案2】：

你需要declare global

declare global 
  interface Window 
    fetch:(url: string, options?: ) => Promise<any>
  

这样就可以了：

window.fetch('/blah').then(...); 

【讨论】：

你在使用 webpack 吗？对我来说，我在一个模块中全局声明的东西在其他模块中是不可见的。有什么线索吗？

下面的答案有助于阐明为什么会这样。另见：typescriptlang.org/docs/handbook/…