ChatGPT解决这个技术问题 Extra ChatGPT

TypeScript 错误:“窗口”类型上不存在属性“X”

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

你使用模块吗?答案有所不同
我使用 React 组件。以上所有行为都来自 React 组件。它们可能被称为某种模块,因为它们封装了逻辑

P
PPC-Coder

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


您的“好解决方案”无法编译。“属性 FB 在类型窗口和 typeof globalThis 上不存在”
@jtiscione 是的 typescriptlang.org/play?noImplicitReturns=false#code/… 如果您的文件不是模块,请删除声明全局 typescriptlang.org/play?noImplicitReturns=false#code/…
为什么这个答案没有标记为答案?我找了很久很久才找到一种从控制台/外部 JS 访问反应状态函数的方法,这是唯一在 TS 中编译并工作的方法
@Beerswiller 因为 OP 无法让它工作,也懒得跟进🤷‍♂️
如果管理员关心此站点上内容的质量,他们会接管这个被遗弃的问题并接受答案。
P
Pallav Jha

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

一些例子:

1-) 做一个演员表:

(window as any).X

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

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

W̶i̶n̶d̶o̶w̶s̶(任意窗口).X
S
Sajad Saderi

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

window["FB"]

M
Michal Frystacky

我在没有声明全局的情况下使用它

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

括号太多...删除它我得到 Cannot redeclare block-scoped variable 'window'
k
kyun

更好的是

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

正如目前所写的那样,您的答案尚不清楚。请edit添加其他详细信息,以帮助其他人了解这如何解决所提出的问题。您可以找到有关如何写出好答案的更多信息in the help center
A
Avadhut Lakule

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

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

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

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

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

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