TypeScript 类型断言

news2024/11/15 9:30:54

TypeScript 类型断言

简单来说类型断言就是 使用as关键词 强行指定获取到的结果类型

应用场景

  // 类型断言: 强行指定获取到的结果类型

// 应用场景
  // 页面上有一个 id 为 link 的 a 标签
  // 我们知道它是 a 标签
  // 但是 TS 不知道 
  // document.getElementById 的返回值是 HTMLElement 所有TS认为他是HTMLElement 
  // 而 HTMLElement 身上没有 href a标签应该是HTMLAnchorElement href在HTMLAnchorElement中
  // 所以我们需要强行指定它的类型为HTMLAnchorElement 我们才能使a.herf不报错
  
  const a = document.getElementById('link') as HTMLAnchorElement
  const box = document.getElementById('box') as HTMLDivElement
  const pp = document.getElementById('pp') as HTMLParagraphElement
  const img = document.getElementById('avatar') as HTMLImageElement

 

如果我们不知道一个标签是什么类型,我们可以像下面这样

用img标签举例
先创建一个img元素,然后把鼠标放到接收的变量上面(下图就是把鼠标放在result上面)就会弹出来img是HTMLImageElement类型了

在这里插入图片描述
总结: 当函数获取到的结果类型较为宽泛时, 我们又知道具体类型, 就可以使用断言强行指定类型

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/834918.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【JAVA BASE API】介绍Java基础API语法,包括JAVA8之后的时间日期等

博主:_LJaXi Or 東方幻想郷 专栏: Java | 从跨平台到跨行业 开发工具:IntelliJ IDEA JAVA BASE API Object 类clone 对象克隆toString() 转换字符串equals(Object obj) 地址比较 Objects 类Objects.equals(Object obj1, Object obj2) 非空比较…

react ant add/change created_at

1.引入ant的 Table import { Table, Space, Button, message } from antd; 2.获得接口的数据的时候增加上创建时间 const response await axios.get(${Config.BASE_URL}/api/v1/calculation_plans?token${getToken()});if (response.data.message ok) {const data respon…

Matlab的信号频谱分析——FFT变换

Matlab的信号频谱分析——FFT变换 Matlab的信号频谱分析 FFT是离散傅立叶变换的快速算法,可以将一个时域信号变换到频域。 有些信号在时域上是很难看出什么特征的。但是如果变换到频域之后,就很容易看出特征了。 这就是很多信号分析采用FFT变换的原因…

灵遨底盘驱动安装

文章目录 ROS Packages灵遨科技ROS包的安装安装ROS依赖包导入lingao_ros包到工作空间工作空间的环境source (可选) 通讯接口设置ROS Package 基本用法使用测试 ROS Packages lingao_base: 灵遨底盘驱动软件包,用于ROS的底盘通讯收发 lingao_…

C++初阶引用

目录 引用引用的特性使用输出型参数作返回值小总结引用的权限引用和指针 引用 引用不是新定义一个变量,而是给已存在变量取了一个别名,编译器不会为引用变量开辟内存空间,它和它引用的变量共用同一块内存空间。 比如周树人,在外…

毕马威加入IBM量子网络,已搭建完成通信行业量子电路!

​ 毕马威全球量子中心主管Bent Dalager(图片来源:网络) 随着全球企业技术的持续转型,量子计算在开发创新解决方案上越来越重要。为此,毕马威(KPMG)公司加入了IBM量子网络,旨在利用量子计算解决当今最复杂的…

为什么list.sort()比Stream().sorted()更快?

真的更好吗&#xff1f; 先简单写个demo List<Integer> userList new ArrayList<>();Random rand new Random();for (int i 0; i < 10000 ; i) {userList.add(rand.nextInt(1000));}List<Integer> userList2 new ArrayList<>();userList2.add…

Python爬虫遇到重定向问题解决办法汇总

在进行Python爬虫任务时&#xff0c;遇到重定向问题是常见的问题之一。重定向是指在发送请求时&#xff0c;服务器会返回一个新的URL&#xff0c;将请求重新定向到该URL。为了帮助您解决这个问题&#xff0c;本文将提供一些实用的解决办法&#xff0c;并给出相关的代码示例&…

java linq多字段排序时间比较

public static void main(String[] args) {//100万条数据List<CrmInvestSaleUserCount> waitAssignUserList new ArrayList<>();for (int i 0; i < 1000000; i) {waitAssignUserList.add(new CrmInvestSaleUserCount().setSales_username("test" i…

小孩学python课程需要多久,儿童学python哪个机构好

本篇文章给大家谈谈小孩学python课程需要多久&#xff0c;以及儿童学python语言能做什么&#xff0c;希望对各位有所帮助&#xff0c;不要忘了收藏本站喔。 学习儿童python编程越来越受欢迎&#xff0c;原因有很多&#xff0c;对于孩子来说&#xff0c;Python是一种很好的编程语…

深入探究DDD领域建模的方法:从概念到实践

目录 &#xff11;.什么是领域建模&#xff1f; &#xff12;.领域驱动设计的基本原则 &#xff13;.领域建模的核心概念 &#xff14;.DDD领域建模方法 &#xff15;.领域建模中的挑战与解决方案 &#xff16;.DDD领域建模的优势和适用场景 &#xff17;.DDD领域建模的…

【枚举+01 trie树】CF1658 D2

Problem - D2 - Codeforces 题意&#xff1a; 给定一个区间[l, r]和r - l 1个数&#xff0c;问是否存在一个数 x &#xff0c;使得这些数异或上 x 之后为[l, r]的一个排列 思路&#xff1a; 这种有关一个集合和异或操作的&#xff0c;都可以试试字典树 我们将所有数插入到…

C++ 左值和右值

C 左值和右值 左值、右值左值引用、右值引用std::move()std::move()的实现引用折叠 完美转发forward()的实现函数返回值是左值还是右值如何判断一个值是左值还是右值 左值、右值 在C11中所有的值必属于左值、右值两者之一&#xff0c;右值又可以细分为纯右值、将亡值。在C11中…

Python实现蚁群优化算法,求解旅行商问题

文章目录 蚁群算法蚂蚁的基本变量蚂蚁的优化流程蚁群优化验证与可视化 蚁群算法 蚁群算法是Colori A等人在1991年提出的&#xff0c;通过模仿蚂蚁觅食行为&#xff0c;抽象出信息素这一奖惩机制&#xff0c;从而赋予蚂蚁智能Agent的身份&#xff0c;使之得以在最佳路线问题中大…

Windows环境下Node.js二进制版安装教程

文章目录 前言一 下载Node.js二 设置环境变量三 配置全局安装和缓存路径四 设置仓库 前言 新版的Node.js已自带npm&#xff0c;就在Node.js下载完成解压后的文件内&#xff0c;的node_modules包中。 npm的作用&#xff1a;是对Node.js依赖的包进行管理&#xff0c;类似maven。…

使用 CausalPy 进行因果推理

这篇文章通过一个实际的例子简要介绍了因果推理&#xff0c;这个例子来自于《The Brave and True》一书&#xff0c;我们使用 CausalPy 来实现。 因果推理是从观察数据中估计因果效应的过程。对于任何给定的个体&#xff0c;我们只能观察到一种结果。另一种结果对我们来说是隐藏…

蓝牙ble tips2-UUID GATT(service和CHARACTERISTIC) profile相关概念介绍

服务和特性 低功耗蓝牙设备之间通信&#xff0c;都是基于服务和特性。一个蓝牙设备中可以包含若干个服务&#xff0c;一个服务中可以包含若干个特性&#xff0c;每一个服务或者特性都要有一个UUID。蓝牙的数据交互都是基于一个个特性进行的&#xff0c;数据交互的方式有五种&a…

超全面的高精度行星减速机结构、原理、功能以及优势解析

行星减速机是运动控制系统中连接伺服电机和应用负载的一种机械传动组件&#xff0c;具有高减速比、良好的传动特性、结构紧凑、体积小、重量轻、可靠性高、低噪音等优点&#xff0c;广泛用于电机、汽车、机器人及各种工业机械中&#xff0c;以实现高效率和稳定性。 一、什么是…

Ubuntu20.04安装ROS Noetic 版本安装记录

用的是VMWare的20.04的Ubuntu虚拟机&#xff0c;打算安装一下Noetic 版本的ROS学习一下。B站有个视频可以参考一下&#xff1a;在Ubuntu20.04上安装ROS机器人操作系统-Noetic但是基本也是参考中文文档安装&#xff0c;步骤相比网上的教程更权威Ubuntu install of ROS Noetic&am…

LeetCode--HOT100题(20)

目录 题目描述&#xff1a;48. 旋转图像&#xff08;中等&#xff09;题目接口解题思路代码 PS: 题目描述&#xff1a;48. 旋转图像&#xff08;中等&#xff09; 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#x…