react+typescript通过window.xxx挂载属性报错的解决方案

最新推荐文章于 2024-02-14 05:15:00 发布
最新推荐文章于 2024-02-14 05:15:00 发布
阅读量2.5k 收藏 3
点赞数 3
分类专栏： 项目中碰到的一些bug和特殊情况 react 文章标签： typescript react.js html 前端
Edited by Boale_H （博哥的二进制世界）
本文链接：https://blog.csdn.net/Boale_H/article/details/120133811
版权

react+typescript通过window.xxx挂载属性报错的解决方案

背景

如下图，在react+typescript项目中，通过window.xxx挂载属性报错了，提示类型“Window & typeof globalThis”上不存在属性xxx，这是因为在typescript项目中，我们没有对window进行类型声明的原因，所以才会报错
在这里插入图片描述

解决方案

通过对window进行类型声明，即可解决此问题。
在项目src目录下创建types文件夹，文件家下创建common.d.ts

interface Window {
  [propName: string]: any;
}

在这里插入图片描述
此时通过window.xxx挂载属性就不会再报错了
在这里插入图片描述

Boale_H
关注
  • 3
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
typescript往window挂载属性
qq_38372612的博客
05-11 2475
使用
【TS基础】类型“Window & typeof globalThis”上不存在属性“$loading”
Milk~每天分享一点点，技术进步一点点
08-31 3万+
类型“Window & typeof globalThis”上不存在属性“$loading” 错误问题 解决方法 需要声明一下window 目录文件 代码演示 declare interface Window { $loading: any } 接口声明（interface I { x: number[]; }）
使用React-window和本机函数提高React中的应用程序性能-React开发
05-27
使用React窗口和本机功能提高React中的应用程序性能:laptop:在火箭座椅DoWhile研讨会期间制定的React-Performance项目。 在本研讨会中，使用React窗口和本机函数对React的应用程序性能进行了改进。 done已完成项目Project是一个可渲染一千多个图像的feed，目的是即使渲染这么多图像也能提高应用程序的性能。 was讲授的内容仅渲染屏幕上出现的组件使用了库的FixedSizeList函数
react-antd-ts-admin:react + antd + typescript的后台管理系统
03-11
项目简介 基于React+AntD+TypeScript的后台管理系统 技术依赖 React-（UI框架） 蚂蚁设计-（组件库） TypeScript-（静态类型） Webpack 轴距 较少的 功能 登录/退出 全屏浏览 一键换肤 个人中心 侧边菜单 标签快捷导航 图标 表单 表格 图表 折线图 面积图 柱状图 条形图 饼图 散点图 地图 标签选项卡 发布/导出Excel 用户管理 文章管理 创建文章 文章列表 草稿箱 垃圾箱 发布 头像上传 文件上传 错误处理 403 404 组件 可编辑的树 项目截图 目录结构 |-- config webpack配置文件 |-- dist webpack构建目录 |-- docs 文档 |-- public html模板 |--
TS学习笔记
qq_40721240的博客
06-26 258
ts增加：unknow、any、void、never、元组any、unkonw、void、never的区别any：类型检查、编译筛查都放行unknow：绕过赋值时的类型的检查，什么类型都可以赋值给unknow类型，unknow只可以赋值给 unknow和anyvoid：没有returnnever：断头路，代码执行到此位置，（抛出异常、return等）类型断言：1、a as string 2、<string>a。
React+TS变量挂载全局window,类型错误
haohaiwangji的博客
01-04 3783
在使用ts开发的时候，想要挂载变量到window上，结果出现错误提示： 类型“Window & typeof globalThis”上不存在属性
nextJs:document、window报错
ilovewangjie990502的博客
07-02 2271
页面使用ssr渲染的时候，react的生命周期中render()阶段负责创建虚拟dom，进行diff算法，更新dom树，render及之前的阶段，并没有将组件渲染为实际的dom节点，所以不能获取window对象，如果是下面这样是可以拿到window对象的： 官方解决办法 在使用document/window组件的父组件写成： import dynamic from 'next/dynamic' const DynamicComponent = dynamic(() => import('../co
引用window自定义变量以及ts在window上自定义变量数据类型报错的解决方案
无翼之雀的博客
09-12 1万+
一、问题描述。举个例子，在TypeScript中，当我们需要给window对象添加全局变量（如testName），或者需要使用window下自定义创建的变量（以testName为例）。会出现以下ts报错：类型“Window & typeof globalThis”上不存在属性“testName”。二、解决方案。1、增加自定义属性声明。2、将window类型强制转换为any。3、使用方括号
类型“Window & typeof globalThis”上不存在属性“attachEvent”
qq_39121482的博客
10-12 3070
declare const window: Window & { attachEvent: any }; 纯记录
TypeScript中引入window身上的方法报错：找不到名称
Liberty_yes的博客
02-25 5164
TypeScript使用window身上的方法 TypeScript中引入window身上的方法报错： 类型“Window & typeof globalThis”上不存在属性“xxxx”。 给window定义any类型：（不推荐） 这样就可以正常使用并且不报错啦！ 在项目中找到*.d.ts后缀的文件 加上以下代码即可： //.d.ts文件下 interface Window { gdp: any; //注意这里如果不写any那么用window.gdp是可以的，但是用window.gdp
Next + React + Node + Mysql + Typescript 全栈博客项目.zip
01-15
软件开发设计：应用软件开发、系统...云计算与大数据：包括云计算平台、大数据分析、人工智能、机器学习等，云计算是一种基于互联网的计算方式，通过这种方式，共享的软硬件资源和信息可以按需提供给计算机和其他设备。
electron-boilerplate:react + typescript + electron 项目模板
05-25
react + typescript + electron 项目模板 Installation 1. yarn global add qingtian-cli 2. qt new your-project-name -t electron or git clone ...
tailwind-react-typescript:Tailwind.css周围的React + Typescript包装器
05-11
尾风React提供一个接口，用于通过类型检查和自动完成功能来应用Tailwind类。 <Styled properties={{>
react-typescript-starter:react + scss + typescript + mobx最新版本
05-06
React+打字稿+ Mobx git clone https://github.com/Mainyf/react-typescript-starter cd react-typescript-starter npm i npm run start
Typescript给window对象添加全局变量
热门推荐
weixin_34289454的博客
06-07 3万+
2019独角兽企业重金招聘Python工程师标准>>> ...
vue+typescript 情况下如何给window挂载参数
技术前端，忠于热爱 @回忆哆啦没有A梦
05-24 3382
vue3+typescript 情况下如何给window挂载参数。解决给window挂载参数时报错。
TypeScript 在开发应用中的实践总结
福禄网络研发团队的博客
06-23 517
背景 以前 hybrid app 的移动端开发模式下，H5 和客户端通信的 js sdk 代码使用 js 编写，sdk 方法的说明使用文档输出。对于开发的使用来说，在 IDE 中不能得到友好的参数类型提示。于是我们维护一个类型定义包进行 sdk 方法的类型定义。但这样对于维护 sdk 的同学来说，维护源码的同时需要同步更新类型定义，更新如果不及时，开发需要通过类型合并临时解决。加上以前的代码 a...
如何在TypeScript中正确定义Window类型
最新发布
文本魔术
02-14 2532
在几乎所有的前端应用中，你都可能遇到过这个错误：类型'Window & typeof globalThis'上不存在属性'X'。在这篇文章中，我们将介绍几个不同的解决方案来解决这个问题。
React中使用window全局变量出现“Property ‘xx‘ does not exist on type ‘Window & typeof globalThis‘.“
duansamve的博客
09-07 1万+
解决React中使用window全局变量出现“Property ‘xx‘ does not exist on type ‘Window & typeof globalThis‘.“的问题
使用react+ typescript
05-13
React 和 TypeScript 可以很好地结合使用，TypeScript 是一种静态类型语言，可以帮助我们检查代码中的错误并提供更好的代码提示。下面是一些使用 React 和 TypeScript 的基本步骤： 1. 安装 TypeScript：可以使用 npm 或者 yarn 安装 TypeScript ```bash npm install -g typescript ``` 2. 创建 React 应用：可以使用 create-react-app 创建一个简单的 React 应用 ```bash npx create-react-app my-app --template typescript ``` 3. 开始编写 TypeScript 代码：在创建的应用中，可以编写 TypeScript 代码，例如： ```tsx import React from 'react'; interface Props { name: string; } const Hello: React.FC<Props> = ({ name }) => { return <div>Hello, {name}!</div>; }; export default Hello; ``` 在上面的代码中，我们定义了一个名为 `Hello` 的 React 组件，它接受一个 `name` 属性，并使用 `React.FC` 类型进行声明。 4. 运行应用程序：可以使用 `npm start` 命令启动应用程序，然后在浏览器中访问 `http://localhost:3000` 查看效果。 以上是使用 React 和 TypeScript 的基本步骤，你可以根据需要进行更多的配置和开发。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值