TypeScript---在进行TypeScript 类型注解后，依然报错获取的dom元素可能为null.

最新推荐文章于 2024-07-21 18:22:34 发布
最新推荐文章于 2024-07-21 18:22:34 发布
阅读量323 收藏
点赞数 6
文章标签： typescript javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_73406105/article/details/137244251
版权

1.问题场景   

        进行TypeScript 类型注解后，依然报错获取的dom元素可能为null.

2.解决

        （1）进行类型断言

        类型断言的作用在于绕过编译器的类型检查，强制将一个值视为指定类型。

        

        （2）通过if判断元素不为空

DeRozan569
关注
  • 6
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
【TypeScript】document.body.style TS 报错 Cannot assign to 'style' because it is a read-only property.ts...
日常问题bug解决、学习分享、个人杂谈等等随便写写哈哈哈
04-28 418
报错信息 解决方法 style对象提供了一个cssText属性，支持设置多种CSS样式： document.body.style.cssText = `width:${targetX}px; height:${targetY}px; transform: scale(${scaleRatio}) translateX(-50%); left: 50%`; 还有其他方法也可以，参考下面的文章 ...
reactjs+typescript项目中访问document对象错误
暮色里的山羊
04-01 736
在安装了几个依赖后发现我的document 不能用了，就连window对象也访问不了 后面将下载的依赖一个个删除后才发现是 cross-fetch 原因排查中。。。求指教
ts中document报错
TianQiWanLaiQiu的博客
03-31 289
document.querySelector('.tesd')?.appendChild(html)
前端：获取dom元素，使用ts报红错误
2301_80820432的博客
11-24 389
类型 "null" 到类型 "HTMLInputElement" 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 "unknown"。报错：类型 "Ref<null>" 到类型 "HTMLInputElement" 的转换可能是错误的，因为两种类型不能充分重叠。如果这是有意的，请先将表达式转换为 "unknown"。placeholder="请输入您的问题" class="shuru" ref="inputref" /报错：类型“never”上不存在属性“focus”
Taller-1-TypeScript
04-17
【标签】"HTML"表明这个项目或教程可能结合了HTML，意味着我们可能会看到如何在TypeScript环境中构建和交互DOM元素，创建动态Web页面。HTML与TypeScript结合，通常意味着使用TypeScript编写的JavaScript代码会用于...
desafio-01-reacjs
03-14
2. **JSX**：学习JSX的基本语法，如何在JSX中嵌入表达式，以及如何将JSX转换为原生DOM元素。 3. **TypeScript基本类型**：了解TypeScript的类型系统，包括基本类型（如string、number、boolean、null、undefined）、...
100-Days-of-JS-and-TS-源码.rar
10-10
5. **TypeScript**：理解静态类型系统，学习类型注解、接口、泛型、枚举、装饰器等TS特性，以及如何将JS代码转换为TS。 6. **DOM操作**：掌握如何通过JavaScript操作HTML元素，包括选择元素、创建元素、修改元素...
react-ts-tutorial
03-13
在本教程中，我们将深入探讨如何使用TypeScript与React进行开发。"react-ts-tutorial"是一个专门为学习如何在React项目中集成和利用TypeScript而设计的教程资源。TypeScript是JavaScript的一个超集，它提供了静态...
js代码-ceshiceshiceshi
07-15
在这个案例中，它可能包含关于如何运行、测试或理解`main.js`中的代码的说明，以及任何依赖、注意事项或者作者的注解。 在JavaScript中，我们经常会遇到以下几个关键知识点： 1. 变量与数据类型：JavaScript支持...
JavaScript基础教程之querySelectorAll( )方法遇到的问题
monkeyfly学前端
01-13 6万+
Write By Monkeyfly 以下内容均为原创，如需转载请注明出处。 一、前提 最近这两天一直在学习JavaScript的事件委托（或称事件代理），用了两天的时间看完了这篇《js中的事件委托或是事件代理详解》博客，并且将博主提供的案例手动敲了两边，可以说是基本掌握了事件委托的原理和用法。这篇博客对于JavaScript的事件委托的讲解还是比较通俗易懂，详细到位的，在这里向大
document.querySelector()方法
热门推荐
huangbaokang的博客
03-22 15万+
HTML 的DOM querySelector()方法可以不需要额外的jQuery等支持，也可以方便的获取DOM元素，语法跟jQuery类似。 获取文档中id=”container”的元素 &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;ti
TypeScript 报错汇总
青蛙king的博客
12-28 1342
方案一：使用 require 代替 import，这需要额外的在 .eslintrc.js 文件中的 env 对象中引入 commonjs 环境。先在 src 目录下创建一个 types 文件夹，然后在里面新建一个 declare.d.ts 文件。以 declare 声明的变量和模块后，其他地方不需要引入，就可以直接使用了。这样，在项目中使用所有的 jsx 和 tsx 文件就不会报错了。文件中声明模块（推荐）
浅谈TypeScript和JavaScript
document_ljt的博客
08-24 1141
TypeScript 和 JavaScript 是目前项目开发中较为流行的两种脚本语言。   JavaScript 是轻量级的解释性脚本语言，可嵌入到 HTML 页面中，在浏览器端执行。而TypeScript 是JavaScript 的超集，即包含JavaScript 的所有元素，能运行JavaScript 的代码，并扩展了JavaScript 的语法。相比于JavaScript ，它还增加了...
TypeScript中使用getBoundingClientRect报错Property 'x' does not exist on type 'ClientRect | DOMRect
前端知识总结
05-08 1699
内容参考github ts问题11085 DomRect之前叫ClientRect，后来更名了1， ts兼容了两种对象，但ClientRect没有x,y属性。所以使用getBoundingClientRect时： ​let unspecifiedRect = document.body.getBoundingClientRect(); unspecifiedRect.x // fails let ...
Vue+typescript报错项
weixin_30565199的博客
12-08 1371
39:1 Unable to resolve signature of class decorator when called as an expression. Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type ...
Typescript document.getElementById('file')类型转换
qq_41248529的博客
01-11 4953
const file = document.getElementById(‘file’) as HTMLInputElement;
项目中常见的TypeScript错误汇总
NewTyun的博客
03-17 4237
新钛云服已为您服务1431天TypeScript 错误信息由错误码和详细信息组成。例如：TS2456 ，其中错误码是以“TS”开头 + 数字(一般是 4 位数字)结尾这样的格式组成的字符串...
【React】常见的 HOC 使用案例
最新发布
u013675821的博客
07-21 938
高阶组件是一种强大的模式，可以在 React 中实现代码复用和逻辑抽象。提取和重用跨组件的逻辑控制组件的渲染操作传递给组件的 props管理和注入状态。
this.$nextTick 报错Unsafe call of an any typed value.eslint@typescript-eslint/no-unsafe-call
05-31
这个错误是 TypeScript 的 ESLint 校验规则 `@typescript-eslint/no-unsafe-call` 报出的，意思是在调用 `this.$nextTick` 方法时，存在对 `any` 类型值进行不安全的调用操作。 解决这个问题的方法是，在调用 `this...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值