TypeScript错误:属性'类型'windows '

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

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

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属性在所有?

206635 次浏览
小开

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

小开

我使用这个没有声明全局

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

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

小明的例子:

1-)做一个铸造:

(window as any).X

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

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

你可以很容易地解决这个问题

window["FB"]
小开

更好的是

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

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

我通过在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"]
}
}
小开

攻击的解决方案用于“在typescript中类型窗口上不存在属性”问题;

在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);
小开

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

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


提交答案