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

问题描述 投票:0回答:9

我已将 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(修复错误)

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

declare const window: any;

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

为什么第一个版本不起作用,但第二个版本可以,即使我根本没有指定 FB 属性?

reactjs typescript create-react-app
9个回答
419
投票

为什么

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


53
投票

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

一些例子:

1-) 演员阵容

(window as any).X

2-) 将以下代码放在名为

react-app-env.d.ts

的文件中
interface Window {
  X?: {
    Y?: {
      .......
    }
  }
}

26
投票

轻松解决问题无需申报

window["FB"]

更新
因为这是一种无需任何编译器配置即可确保程序与打字稿兼容的变通方法,也许您只需要进行类型验证。

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

11
投票

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

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

7
投票

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

我通过在 src 中创建文件夹名称 types 并在该文件夹中创建 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"]
  }
}

6
投票

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

步骤:1 在您的 src 目录中,创建一个包含以下 index.d.ts 文件的类型目录: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"]
  }
}

STEP: 3 现在使用它,无论你想做什么。

window.example = 'hello';

console.log(window.example);

5
投票

更好

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

0
投票

对于来自 Next.Js 的任何人,您需要在

<Script />
中使用
<body>
来加载它(在
<Head />
中加载它是行不通的):

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


0
投票

应该通过在项目的根目录中创建具有以下内容的

global.d.ts
文件来忽略它:

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

它忽略

window
对象

的所有变量
© www.soinside.com 2019 - 2024. All rights reserved.