登录  /  注册
如何修复 Vue 应用程序的窗口对象上的这些 Typescript 错误?
P粉344355715
P粉344355715 2023-12-06 20:46:24
[Vue.js讨论组]

在我的 Vue 3 应用程序的组件中,我需要使用窗口上的一些自定义属性,如下所示:

window.ZohoHCAsapSettings = { //<-- ERROR HERE
  ticketsSettings: {
    preFillFields: {
      email: {
        defaultValue: user.value?.email,
      },
    },
  },
};

但是我在 ZohoHCAsapSettings 上遇到 TypeScript 错误:

Property 'ZohoHCAsapSettings' does not exist on type 'Window & typeof globalThis'. ts(2339)

所以我尝试像这样扩展窗口:

interface customWindow extends Window {
  ZohoHCAsapSettings?: unknown;
}
declare const window: customWindow; //<-- ERROR HERE
window.ZohoHCAsapSettings = {
  ticketsSettings: {
    preFillFields: {
      email: {
        defaultValue: user.value?.email,
      },
    },
  },
};

这会消除 ZohoHCAsapSettings 上的错误,但会在 declare 上生成另一个错误,内容如下:

Modifiers cannot appear here. ts(1184)

我是 TypeScript 新手,所以不确定这里发生了什么。

如果重要的话,我正在使用 Visual Studio Code 作为我的 IDE。

有什么想法吗?

P粉344355715
P粉344355715

全部回复(2)
P粉314915922

正如 @Buszmen 指出的, 全局 Window 接口应该使用新属性进行扩展。类型声明通常存储在自己的 .d.ts 文件中(例如,全局变量为 src/globals.d.ts)。

如果您使用的是 npm init vuenpm init vite 或 Vue CLI 搭建的项目,关键是指定 global 命名空间:

// src/globals.d.ts
declare global {
  interface Window { ZohoHCAsapSettings?: unknown; }
}
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号