typescript - 如何扩展 'Window' typescript 接口(interface)

Question

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

I'm doing this in VS Code, v.0.3.0 which is running TS v.1.5 (IIRC).

在我想使用它的 TS 类文件中声明接口(interface)不起作用:

///<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”文件中声明这个相同的接口(interface)并在我的 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)，然后在转换中使用它:

interface WindowX extends Window {
  fetch:(url: string, options?: {}) => Promise<any>
}
...
(<WindowX> window).fetch('/blah').then(...); // OK

为什么扩展界面在“d.ts”中有效，但就地无效？

我真的必须经历这些转折吗？

Answer 1

您需要声明全局

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

这样就可以了:

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