reactjs 类型脚本错误：类型"Window"上不存在属性"X"

ergxz8rk 于 2023-01-30 发布在 React

关注(0)|答案(8)|浏览(516)

我已将TS添加到React/Redux应用程序中。
我在应用中使用window对象，如下所示：

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

TS抛出错误：
类型脚本错误：类型"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（修复错误）

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

declare const window: any;

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

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

reactjs

来源：https://stackoverflow.com/questions/56457935/typescript-error-property-x-does-not-exist-on-type-window

8条答案

按热度按时间

mzsu5hc01#

为什么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')）

赞(0）回复(0）举报 2023-01-30

xdnvmnnf2#

有几种方法可以解决这个问题：
一些例子：
1-)做一个演员阵容：

(window as any).X

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

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

赞(0）回复(0）举报 2023-01-30

vsikbqxv3#

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

window["FB"]

- 更新**

由于它是一种没有任何编译器配置的变通方法，可以确保程序与类型脚本的兼容性，因此您可能只需要进行类型验证。

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

赞(0）回复(0）举报 2023-01-30

uemypmqf4#

我使用此函数时没有声明global

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

赞(0）回复(0）举报 2023-01-30

vaj7vani5#

我在我的角代码中遇到了这个问题。下面的解决方案帮助我解决了这个问题。
我通过在src内创建名为types的文件夹并在该文件夹内创建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"]
  }
}

赞(0）回复(0）举报 2023-01-30

w6lpcovy6#

更好的是

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

赞(0）回复(0）举报 2023-01-30

utugiqy67#

HACK SOLUTION针对问题“TypeScript中的类型Window上不存在属性”

STEP：1在src目录中创建一个types目录，其中包含以下index.d.ts文件：源代码/类型/索引.d.ts

export {};

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

STEP：2将types目录的路径添加到tsconfig.json文件中。
tsconfig.json

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

STEP：3现在使用它，无论你想做什么。

window.example = 'hello';

console.log(window.example);

赞(0）回复(0）举报 2023-01-30

noj0wjuj8#

对于来自Next.Js的任何人，您需要在<body>中使用<Script />来加载它（在<Head />中加载它是行不通的）：
https://nextjs.org/docs/basic-features/script

赞(0）回复(0）举报 2023-01-30

我来回答

reactjs 类型脚本错误：类型"Window"上不存在属性"X"

1（不工作）

2（修复错误）

8条答案

相关问题

热门标签

最新问答