TypeScript错误：属性'X'在类型'Window'上不存在

Question

我已将TS添加到我的React/Redux应用程序中。

我在我的应用程序中使用window对象，如下所示：

componentDidMount() {
  let FB = window.FB;
}

TS抛出一个错误：

类型脚本错误：类型“窗口”上不存在属性“FB”。TS2339

我想修正这个错误。

// Why doesn't this work? I have defined a type locally

type Window = {
  FB: any
}

componentDidMount() {
  let FB = window.FB;
}

// TypeScript error: Property 'FB' does not exist on type 'Window'. TS2339

我在这里找到了答案https://stackoverflow.com/a/56402425/1114926

declare const window: any;

componentDidMount() {
  let FB = window.FB;
}
// No errors, works well

为什么第一个版本不起作用，而第二个版本起作用，尽管我根本没有指定FB属性？

Answer 1

您可以轻松地解决问题，而无需进行任何声明

window["FB"]

Answer 2

有几种方法可以解决这个问题：

例如：

1-）做一个演员：

(Windows as any).X

2）将以下代码放入文件react-app-env.d.ts

interface Window {
X?: {
  Y?: {
      .......
   }
}

}

Answer 3

为什么声明const window:any 工作？

因为您声明了一个类型为any的局部变量。具有类型为any的东西本质上关闭了窗口的类型检查，因此您可以对其进行任何操作。我真的不推荐这个解决方案，这是一个非常糟糕的解决方案。

为什么键入Window={FB:any}不起作用？您可以定义一个类型窗口。如果在模块中定义了该类型，则该类型与全局窗口对象的类型无关，它只是模块内部称为窗口的一种类型。

扩展窗口的好方法您必须扩展全局窗口接口。您可以这样做：

declare global {
    interface Window {
        FB:any;
    }
}

let FB = window.FB; // ok now

请注意，这个扩展将在您的整个项目中可用，而不仅仅是您定义它的文件。此外，如果FB有定义，您可以考虑键入它更好一点（FB：类型导入（'FBOrWhateverModuleNameThishave'））