我已将 TS 添加到我的 React/Redux 应用程序中。
我在我的应用程序中使用
window
对象是这样的:
componentDidMount() {
let FB = window.FB;
}
TS 抛出错误:
TypeScript 错误:类型“Window”上不存在属性“FB”。 TS2339
我想修正错误
// 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
我在这里找到了答案https://stackoverflow.com/a/56402425/1114926
declare const window: any;
componentDidMount() {
let FB = window.FB;
}
// No errors, works well
为什么第一个版本不起作用,但第二个版本可以,即使我根本没有指定 FB 属性?
为什么
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')
)
有几种方法可以解决这个问题。
一些例子:
1-) 演员阵容
(window as any).X
2-) 将以下代码放在名为
react-app-env.d.ts
的文件中
interface Window {
X?: {
Y?: {
.......
}
}
}
轻松解决问题无需申报
window["FB"]
更新
因为这是一种无需任何编译器配置即可确保程序与打字稿兼容的变通方法,也许您只需要进行类型验证。
if(window["FB"]) {
// do some FB logic
}
我在没有声明全局的情况下使用它
declare const window: Window &
typeof globalThis & {
FB: any
}
我在我的角度代码中遇到了这个问题。以下解决方案帮助我解决了问题。
我通过在 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"]
}
}
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);
更好
declare global {
interface Window {
FB: {
CustomerChat: {
hide: () => void;
show: () => void;
};
};
}
}
对于来自 Next.Js 的任何人,您需要在
<Script />
中使用 <body>
来加载它(在 <Head />
中加载它是行不通的):
应该通过在项目的根目录中创建具有以下内容的
global.d.ts
文件来忽略它:
export { }
declare global {
interface Window {
[key: string]: any
}
}
它忽略
window
对象的所有变量