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

Question

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

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

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

TS 抛出错误：

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

我想修正错误。

1（不起作用）

// 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

2（修复错误）

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

declare const window: any;

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

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

Answer 1

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

一些例子：

1-) 做一个演员表：

(window as any).X

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

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

Answer 2

我使用它而不声明全局

declare const window: Window &
   typeof globalThis & {
     FB: any
   }

Answer 3

更好

declare global {
  interface Window {
    FB: {
      CustomerChat: {
        hide: () => void;
        show: () => void;
      };
    };
  }
}

Answer 4

您可以轻松解决问题无需声明

window["FB"]

Answer 5

为什么declare const window: any; 有效？

因为你声明了一个any 类型的局部变量。拥有any 类型的东西基本上会关闭window 的类型检查，所以你可以用它做任何事情。我真的不推荐这个解决方案，它是一个非常糟糕的解决方案。

为什么type Window = { FB: any } 不起作用？ 你定义了一个类型Window。如果在模块中定义此类型，则与全局 window 对象的类型无关，它只是在您的模块中碰巧被称为 Window 的类型。

好的解决方案 要扩展window，您必须扩展全局Window 接口。你可以这样做：

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

let FB = window.FB; // ok now

请注意，此扩展将在您的整个项目中可用，而不仅仅是您在其中定义它的文件。此外，如果 FB 有定义，您可能会考虑更好地输入它 (FB: typeof import('FBOrWhateverModuleNameThisHas'))