typescript错误：“窗口”类型上不存在属性“X”

IT技术 reactjs typescript create-react-app
2021-04-05 08:49:51

我已将 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 属性？

5个回答

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

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

为什么不起作用type Window = { FB: any }？ 您定义一个类型Window。这种类型如果在module中定义，则与全局window对象的类型无关，它只是Window在module内部调用的类型。

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

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

let FB = window.FB; // ok now

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

为什么这个答案没有被标记为答案？我寻找了很长时间才能找到一种从控制台/外部 JS 访问反应状态函数的方法，这是唯一一种在 TS 中编译并有效的方法
2021-05-23 08:49:51
@jtiscione是它typescriptlang.org/play?noImplicitReturns=false#code/...如果你的文件是不是一个module，取出申报全球typescriptlang.org/play?noImplicitReturns=false#code/...
2021-06-02 08:49:51
您的“好的解决方案”无法编译。“类型 window 和 typeof globalThis 上不存在属性 FB”
2021-06-04 08:49:51
@Beerswiller 因为 OP 无法让它工作，也懒得跟进🤷‍♂️
2021-06-14 08:49:51
如果管理员关心本网站内容的质量，他们会接手这个废弃的问题并接受答案。
2021-06-18 08:49:51

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

一些例子：

1-) 做演员：

(Windows as any).X

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

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

}

无需申报即可轻松解决问题

window["FB"]

我使用这个没有声明全局

declare const window: Window &
   typeof globalThis & {
     FB: any
   }
支架太多了……把它去掉我明白了 Cannot redeclare block-scoped variable 'window'
2021-06-08 08:49:51

更好的是

declare global {
  interface Window {
    FB: {
      CustomerChat: {
        hide: () => void;
        show: () => void;
      };
    };
  }
}
正如目前所写，您的答案尚不清楚。请编辑以添加其他详细信息，以帮助其他人了解如何解决所提出的问题。您可以在帮助中心找到有关如何编写好的答案的更多信息。
2021-05-26 08:49:51
其它你可能感兴趣的问题
上一篇无法将 SVG 导入 Next.js 下一篇使用 babel 后，IE 中未定义“符号”