AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

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

2024-03-08 590
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 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挂载属性就不会再报错了

文章标签：
JavaScript
关键词：
React Native解决方案
React Native typescript
react TypeScript
React Native属性
TypeScript react
Boale_H
目录
相关文章
九月天空
|
JavaScript 前端开发 安全
使用 TypeScript 加强 React 组件的类型安全
【10月更文挑战第1天】使用 TypeScript 加强 React 组件的类型安全
九月天空
289 106
游客zi3qmblbcdexu
|
前端开发 JavaScript
手敲Webpack 5：React + TypeScript项目脚手架搭建实践
手敲Webpack 5：React + TypeScript项目脚手架搭建实践
游客zi3qmblbcdexu
293 6
夏天49597
|
前端开发 JavaScript
React 中的 props 属性传递技巧
【9月更文挑战第6天】本文详细介绍了React中`props`的基本用法，包括传递基本数据类型、对象和数组。文章通过多个代码示例展示了如何正确使用`props`，并探讨了常见的问题及解决方法，如`props`不可变性、默认值设置及类型检查等。正确掌握这些技巧有助于提升编程效率，编写出更健壮的代码。
夏天49597
287 16
小周sir
|
前端开发 JavaScript 开发者
请详细介绍React挂载阶段的方法。
请详细介绍React挂载阶段的方法。
小周sir
207 9
六卿
|
前端开发
React属性之context属性
React中的Context属性用于跨组件传递数据，通过Provider和Consumer组件实现数据的提供和消费。
六卿
136 3
前端徐徐
|
前端开发 JavaScript API
React将组件作为属性传递的最佳实践
本文探讨了在React中将组件作为属性传递的三种常见方式：作为元素传递、作为组件传递、作为函数传递。通过构建带图标的按钮组件，对比分析了每种方式的优缺点，最终推荐将组件作为函数传递，因为它提供了更好的可控性、灵活性和可扩展性。
前端徐徐
161 0
土木林森
|
开发者 自然语言处理 存储
语言不再是壁垒：掌握 JSF 国际化技巧，轻松构建多语言支持的 Web 应用
【8月更文挑战第31天】JavaServer Faces (JSF) 框架提供了强大的国际化 (I18N) 和本地化 (L10N) 支持，使开发者能轻松添加多语言功能。本文通过具体案例展示如何在 JSF 应用中实现多语言支持，包括创建项目、配置语言资源文件 (`messages_xx.properties`)、设置 `web.xml`、编写 Managed Bean (`LanguageBean`) 处理语言选择，以及使用 Facelets 页面 (`index.xhtml`) 显示多语言消息。通过这些步骤，你将学会如何配置 JSF 环境、编写语言资源文件，并实现动态语言切换。
土木林森
191 1
1313310884104708
|
JavaScript 前端开发 安全
[译] 使用 TypeScript 开发 React Hooks
[译] 使用 TypeScript 开发 React Hooks
1313310884104708
161 1
六卿
|
前端开发
React使用hooks遇到的坑_state中的某几个属性数据变成了空字符
本文讨论了在React使用hooks时遇到的一个问题：state中的某些属性数据变成了空字符。作者通过在修改函数中重新解构赋值来获取最新的state值，解决了因数据更新不及时导致的问题。
六卿
179 0
土木林森
|
前端开发 JavaScript 安全
【前端开发新境界】React TypeScript融合之路：从零起步构建类型安全的React应用，全面提升代码质量和开发效率的实战指南！
【8月更文挑战第31天】《React TypeScript融合之路：类型安全的React应用开发》是一篇详细教程，介绍如何结合TypeScript提升React应用的可读性和健壮性。从环境搭建、基础语法到类型化组件、状态管理及Hooks使用，逐步展示TypeScript在复杂前端项目中的优势。适合各水平开发者学习，助力构建高质量应用。
土木林森
302 0