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

Question

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

我window在我的应用程序中使用对象是这样的：

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

TS引发错误：

TypeScript错误：类型“ Window”上不存在属性“ 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（修复错误）

我在这里找到答案/sf/answers/3948169781/

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

无需声明即可轻松解决问题

window["FB"]

更新，
因为它是一种没有任何编译器配置的解决方法，以确保您的程序与打字稿的兼容性，也许您只需要类型验证。

window["FB"]

Answer 3

我使用这个没有声明全局

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

Answer 4

问题“TypeScript 中的窗口类型上不存在属性”的黑客解决方案

步骤：1 在 src 目录中，创建一个包含以下 index.d.ts 文件的 types 目录： src/types/index.d.ts

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);

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')）

Answer 6

我在我的角度代码中遇到了这个问题。下面的解决方案帮助我解决了这个问题。

我通过在src内创建一个文件夹名称类型并在该文件夹内创建index.d.ts文件解决了此错误。

index.d.ts 文件将包含以下代码。

export {};
declare global {
  interface Window {
    chrome: any;  // this will be your variable name
  }
}

如果错误仍然存​​在，请尝试将 types 目录的路径添加到tsconfig.json文件中。

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

Answer 7

应该通过global.d.ts在项目根目录中创建包含以下内容的文件来忽略它：

export { }
declare global {
    interface Window {
        [key: string]: any 
    }
}

它忽略window对象的所有变量

Answer 8

更好的是

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