我已经添加了TS到我的React/Redux应用程序。

我在我的应用程序中像这样使用窗口对象:

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

TS抛出一个错误:

TypeScript错误:属性'FB'不存在类型'Window'。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属性在所有?


当前回答

我使用这个没有声明全局

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

其他回答

对于任何来自Next.Js的人,你需要使用<Script />在<body>中加载它(在<Head />中加载它将不起作用):

https://nextjs.org/docs/basic-features/script

你可以很容易地解决这个问题,不需要任何声明

window["FB"]

更新 因为它是一种不需要任何编译器配置来确保你的程序与typescript兼容的变通方法,所以你可能只需要一个类型验证。

if(window["FB"]) {
  // do some FB logic
}

解决问题“属性不存在类型窗口在TypeScript”

步骤:1 .在src目录下,创建一个包含index.d.ts文件的types目录

export {};

declare global {
  interface Window {
    example: string; // whatever type you want to give. (any,number,float etc)
  }
}

步骤:2添加路径到你的类型目录到你的tsconfig。json文件。

tsconfig.json

{
  "compilerOptions": {
    // ... rest
    "typeRoots": ["./node_modules/@types", "./src/types"]
  }
}

3 .现在,无论你想在哪里使用它。

window.example = 'hello';

console.log(window.example);

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

例如:

1-)做一个铸造:

(window as any).X

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

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

我使用这个没有声明全局

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