当前位置: 首页 > news >正文

typescript 类型断言

typescript 类型断言

TypeScript 是一种在 JavaScript 基础上开发的强类型语言,它为开发者提供了类型安全性和其他有用的特性。类型断言是 TypeScript 中的一种特性,允许开发者在编译时确定变量或表达式的类型。类型断言有多种使用场景,包括处理第三方库、处理 DOM API 和处理其他 JavaScript 代码库。
说人话就是,当你比编译器还要明确的知道一个值的类型的时候,可以使用类型断言来指定更具体的类型

比如
当我们使用ts语法获取这个a标签时
在这里插入图片描述

如下,可以看到吗,不同的方法获取到的变量 ts类型推论也不一样,aLink1使用querySelector,这个方法返回文档中与指定选择器或选择器组匹配的第一个 Element对象。如果找不到匹配项,则返回null,
编译器能知道返回的是一个HTMLAnchorElement类型变量

但是aLink2不行,因为aLink2使用的是getElementById这个方法,

这个方法返回一个匹配特定 ID的元素。编译器就只能给一个HTMLElement类型的变量推论

tips:我们大多数时候还是更多使用getElementById方法,这是因为元素的 ID 在大部分情况下要求是独一无二的,这个方法自然而然地成为了一个高效查找特定元素的方法

但这样也就导致aLink2,返回的就是HTMLElement,这个类对象太过宽泛,

只包含所有标签的公共属性和方法,不包含a标签的特有属性href之类的

在这里插入图片描述

因为这种类型推论太过宽泛,无法让我们操作href等a标签的特有属性或方法,不利于开发

在这种情况下就需要使用类型断言来指定更加具体的类型,

ts类型断言语法

<Type>expression
或者
expression as Type

其中,Type 是你要断言的类型,expression 是你要进行类型断言的表达式。这两种语法是等价的,可以根据个人喜好选择使用。

类型断言的使用

有了类型断言就可以解决上面的那个问题了,如下

  1. 使用as关键字实现类型断言
  2. 关键字as后面的类型是一个更加具体的类型
  3. 通过类型断言,aLink2的类型变得更加具体,这样就能正常的访问a标签的特有属性和方法了

在这里插入图片描述

当然,我们也可以使用第一种类型断言语法
ps:可能是因为我以前是由c入门的,所以个人更喜欢这种语法,不过大部分前端人员更喜欢上面那种写法
当然还有一个原因就是as原本就是一个关键字用来做变量别名的,不太喜欢二义性,
在这里插入图片描述

tips

  1. 谨慎使用类型断言。类型断言可能会导致运行时错误,因为它会告诉 TypeScript 编译器:“相信我,我知道这个值是什么类型”。因此,你应该在确实需要的时候才使用类型断言。
  2. 在使用第三方库时,尽可能地使用类型断言。由于 TypeScript 是强类型的,而 JavaScript 库通常不是,因此在将 JavaScript 库与 TypeScript 代码一起使用时,就可能需要进行大量的类型断言。

相关文章:

typescript 类型断言

typescript 类型断言 TypeScript 是一种在 JavaScript 基础上开发的强类型语言&#xff0c;它为开发者提供了类型安全性和其他有用的特性。类型断言是 TypeScript 中的一种特性&#xff0c;允许开发者在编译时确定变量或表达式的类型。类型断言有多种使用场景&#xff0c;包括…...

如何确定自己是否适合做程序员?

如果你不确定你是否注定要成为一名程序员&#xff0c;这里有六个迹象可能表明你不适合。 1. 你缺乏实验创造力 尽管编程的基础是逻辑&#xff0c;但它在很大程度上是一种创造性的艺术。新程序就像一张空白的画布。画笔和调色板是语言、框架和库。您需要对自己的创作和创造力有…...

LabVIEW以编程方式查找系统中DAQ设备的设备名称

LabVIEW以编程方式查找系统中DAQ设备的设备名称 使用DAQmx VI&#xff0c;“创建虚拟通道”函数&#xff0c;这个函数需要物理通道输入端。当使用相同型号的新设备&#xff08;例如&#xff0c;两个不同的USB-6210&#xff09;运行可执行文件时&#xff0c;代码会中断&#xf…...

23、mysql数据库的安装

&#xff08;无图&#xff0c;简易版本&#xff09; 一、下载 点开下面的链接&#xff1a;https://dev.mysql.com/downloads/mysql/ 点击Download 就可以下载对应的安装包了 二、解压 下载完成后我们得到的是一个压缩包&#xff0c;将其解压&#xff0c;我们就可以得到MyS…...

【实战详解】如何快速搭建接口自动化测试框架?Python + Requests

摘要&#xff1a; 本文主要介绍如何使用Python语言和Requests库进行接口自动化测试&#xff0c;并提供详细的代码示例和操作步骤。希望能对读者有所启发和帮助。 前言 随着移动互联网的快速发展&#xff0c;越来越多的应用程序采用Web API&#xff08;也称为RESTful API&…...

Linux安全加固:保护你的服务器

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…...

【C++初阶】C++STL详解(四)—— vector的模拟实现

​ ​&#x1f4dd;个人主页&#xff1a;Sherry的成长之路 &#x1f3e0;学习社区&#xff1a;Sherry的成长之路&#xff08;个人社区&#xff09; &#x1f4d6;专栏链接&#xff1a;C初阶 &#x1f3af;长路漫漫浩浩&#xff0c;万事皆有期待 【C初阶】CSTL详解&#xff08;三…...

VS code 下 makefile 【缺少分隔符 停下来】 报错解决方法

首先来看报错的makefile源码 再来看报错的信息&#xff1a; 第5行缺少分隔符&#xff0c;其实不止是第5行&#xff0c;只要是前面需要加tab留白的行都会报这个错误&#xff0c;比如说第7行第11行 编译的时候&#xff0c;前面的留白必须是按tab键生成的 但是&#xff01;&…...

虹科案例 | Zuellig Pharma和ELPRO通过符合GDP标准的温度监测和高效的温度数据管理为未来发展奠定基础

在本案例研究中&#xff0c;您将了解Zuellig Pharma 实施了温度监测解决方案&#xff0c;以一致的数据结构获取各国和各种运输方式的数据; 通过将温度数据上传到其数据库管理系统&#xff0c;显著提高了其效率; 并建立了为未来管理决策提供数据增值使用的基础。 项目合作伙伴 …...

为啥我的第二个for循环不加框红的代码就运行失效呢?(文末赠书)

点击上方“Python爬虫与数据挖掘”&#xff0c;进行关注 回复“书籍”即可获赠Python从入门到进阶共10本电子书 今 日 鸡 汤 苟全性命于乱世&#xff0c;不求闻达于诸侯。 大家好&#xff0c;我是皮皮。 一、前言 前几天在Python最强王者群【哎呦喂 是豆子&#xff5e;】问了一…...

Java高级之注解

文章目录 一、注解1.1、Annotation的使用示例1.2、自定义注解1.3、元注解1.4、通过反射获取注解信息---未完成1.5、jdk 8 中注解的新特性 一、注解 注解&#xff1a;Annotation 注解是一种趋势&#xff0c;一定程度上 可以说&#xff1a;框架 注解 反射 设计模式 jdk 5.0 新…...

【SpringMVC】JSON数据传输与异常处理的使用

文章目录 一、Jackson1.1 Jackson是什么1.2 常用注解1.3 实例1.3.1导入依赖1.3.2 配置spring-mvc.xml1.3.3 JsonController.java 二、Spring MVC异常处理机制2.1 使用原因2.2 SpringMVC异常处理2.2.1 异常处理机制流程图2.2.2 异常处理的三种方式 一、Jackson 1.1 Jackson是什…...

LeNet-5

目录 一、知识点 二、代码 三、查看卷积层的feature map 1. 查看每层信息 ​2. show_featureMap.py 背景&#xff1a;LeNet-5是一个经典的CNN&#xff0c;由Yann LeCun在1998年提出&#xff0c;旨在解决手写数字识别问题。 一、知识点 1. iter()next() iter()&#xff1a;…...

Anaconda bug

报错如下&#xff1a; DEBUG:urllib3.connectionpool:Starting new HTTPS connection (1): repo.anaconda.com:443 DEBUG:urllib3.connectionpool:Starting new HTTPS connection (1): repo.anaconda.com:443 DEBUG:urllib3.connectionpool:Starting new HTTPS connection (1):…...

xen-trap

Xen-Trap xen的虚拟化实现有一个很重要的机制就是tarp&#xff0c;中文可以暂且叫做陷入。在ARMv8中&#xff0c;trap就是异常等级的一个切换。 当发生trap的时候&#xff0c;就会进入设定好的异常向量表中&#xff0c;硬件自动判断属于哪种类型的异常。 一、异常处理 ARM…...

微服务架构介绍

系统架构的演变 1、技术架构发展历史时间轴 ①单机垂直拆分&#xff1a;应用间进行了解耦&#xff0c;系统容错提高了&#xff0c;也解决了独立应用发布的问题&#xff0c;存在单机计算能力瓶颈。 ②集群化负载均衡可有效解决单机情况下并发量不足瓶颈。 ③服务改造架构 虽然系…...

235. 二叉搜索树的最近公共祖先

给定一个二叉搜索树, 找到该树中两个指定节点的最近公共祖先。 百度百科中最近公共祖先的定义为&#xff1a;“对于有根树 T 的两个结点 p、q&#xff0c;最近公共祖先表示为一个结点 x&#xff0c;满足 x 是 p、q 的祖先且 x 的深度尽可能大&#xff08;一个节点也可以是它自己…...

DETR:End-to-End Object Detection with Transformers

代码&#xff1a;https://github.com/HuKai97/detr-annotations 论文&#xff1a;https://arxiv.org/pdf/2005.12872.pdf 参考视频&#xff1a;DETR 论文精读【论文精读】_哔哩哔哩_bilibili 团队&#xff1a;Meta AI 摘要 DETR 做目标检测任务既不需要proposal&#xff0…...

如何从第一性原则的原理分解数学问题

如何从第一性原则的原理分解数学问题 摘要&#xff1a;牛津大学入学考试题目展示了所有优秀数学家都使用的系统的第一原则推理&#xff0c;而GPT4仍然在这方面有困难 作者&#xff1a;Keith McNulty 我们中的许多人都熟悉直角三角形的边的规则。根据毕达哥拉斯定理&#xff0c;…...

实现strstr函数

一个字符串有没有在另一个字符串出现过 char* my_strstr(char* arr1, char* arr2) {char* cp;char* a1;char* a2;cp arr1;while (*cp){a1 cp;a2 arr2;while (*a1 *a2){a1;a2;}if (*a2 \0){return cp;}cp;}return NULL; } int main() {char arr1[] "abbbcdefgi"…...

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする

日语学习-日语知识点小记-构建基础-JLPT-N4阶段(33):にする 1、前言(1)情况说明(2)工程师的信仰2、知识点(1) にする1,接续:名词+にする2,接续:疑问词+にする3,(A)は(B)にする。(2)復習:(1)复习句子(2)ために & ように(3)そう(4)にする3、…...

在鸿蒙HarmonyOS 5中实现抖音风格的点赞功能

下面我将详细介绍如何使用HarmonyOS SDK在HarmonyOS 5中实现类似抖音的点赞功能&#xff0c;包括动画效果、数据同步和交互优化。 1. 基础点赞功能实现 1.1 创建数据模型 // VideoModel.ets export class VideoModel {id: string "";title: string ""…...

《Playwright:微软的自动化测试工具详解》

Playwright 简介:声明内容来自网络&#xff0c;将内容拼接整理出来的文档 Playwright 是微软开发的自动化测试工具&#xff0c;支持 Chrome、Firefox、Safari 等主流浏览器&#xff0c;提供多语言 API&#xff08;Python、JavaScript、Java、.NET&#xff09;。它的特点包括&a…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

智能在线客服平台:数字化时代企业连接用户的 AI 中枢

随着互联网技术的飞速发展&#xff0c;消费者期望能够随时随地与企业进行交流。在线客服平台作为连接企业与客户的重要桥梁&#xff0c;不仅优化了客户体验&#xff0c;还提升了企业的服务效率和市场竞争力。本文将探讨在线客服平台的重要性、技术进展、实际应用&#xff0c;并…...

(二)原型模式

原型的功能是将一个已经存在的对象作为源目标,其余对象都是通过这个源目标创建。发挥复制的作用就是原型模式的核心思想。 一、源型模式的定义 原型模式是指第二次创建对象可以通过复制已经存在的原型对象来实现,忽略对象创建过程中的其它细节。 📌 核心特点: 避免重复初…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

C++八股 —— 单例模式

文章目录 1. 基本概念2. 设计要点3. 实现方式4. 详解懒汉模式 1. 基本概念 线程安全&#xff08;Thread Safety&#xff09; 线程安全是指在多线程环境下&#xff0c;某个函数、类或代码片段能够被多个线程同时调用时&#xff0c;仍能保证数据的一致性和逻辑的正确性&#xf…...

是否存在路径(FIFOBB算法)

题目描述 一个具有 n 个顶点e条边的无向图&#xff0c;该图顶点的编号依次为0到n-1且不存在顶点与自身相连的边。请使用FIFOBB算法编写程序&#xff0c;确定是否存在从顶点 source到顶点 destination的路径。 输入 第一行两个整数&#xff0c;分别表示n 和 e 的值&#xff08;1…...

基于IDIG-GAN的小样本电机轴承故障诊断

目录 🔍 核心问题 一、IDIG-GAN模型原理 1. 整体架构 2. 核心创新点 (1) ​梯度归一化(Gradient Normalization)​​ (2) ​判别器梯度间隙正则化(Discriminator Gradient Gap Regularization)​​ (3) ​自注意力机制(Self-Attention)​​ 3. 完整损失函数 二…...