如何扩展'Window' typescript接口

eqqqjvef  于 2023-03-24  发布在  TypeScript
关注(0)|答案(2)|浏览(260)

在我的例子中,我试图扩展TS窗口接口,以包括fetch的polyfill。为什么不重要。问题是“***我如何告诉TS window.fetch是一个有效的函数?***”
我在VS Code v.0.3.0中执行此操作,它运行TS v.1.5(IIRC)。
在我的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”中工作,而不是 * 在原位
我真的要经历这些旋转吗

j2datikz

j2datikz1#

你需要declare global

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

这样就可以:

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

ccrfmcuu2#

当你的文件中有一个顶级的importexport时(你一定在某个地方遇到了这个问题),你的文件是一个 * 外部模块 *。
在一个外部模块中,声明一个接口总是创建一个新的类型,而不是扩充一个已有的全局接口。这模仿了模块加载器的一般行为--在这个文件中声明的东西不会合并或干扰全局作用域中的东西。
这种循环的原因是,否则就没有办法在外部模块中定义与全局作用域中的变量或类型同名的新变量或类型。

相关问题