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

typescript 类型断言

news 2025/9/9 13:57:40

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;包括…...

编程日记 2023/9/18 4:16:34

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

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

编程日记 2023/9/18 4:14:32

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

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

编程日记 2023/9/18 4:13:31

23、mysql数据库的安装

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

编程日记 2023/9/18 4:12:30

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

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

编程日记 2023/9/18 4:09:27

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

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

编程日记 2023/9/18 4:08:26

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

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

编程日记 2023/9/18 4:07:24

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

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

编程日记 2023/9/18 4:06:23

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

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

编程日记 2023/9/18 4:05:21

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

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

编程日记 2023/9/18 4:04:20

Java高级之注解

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

编程日记 2023/9/18 3:59:15

【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是什…...

编程日记 2023/9/18 3:58:13

LeNet-5

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

编程日记 2023/9/18 3:57:12

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):…...

编程日记 2023/9/18 3:56:12

xen-trap

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

编程日记 2023/9/18 3:55:11

微服务架构介绍

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

编程日记 2023/9/18 3:53:09

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

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

编程日记 2023/9/18 3:52:08

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…...

编程日记 2023/9/18 3:51:06

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

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

编程日记 2023/9/18 3:49:04

实现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"…...

编程日记 2023/9/18 3:46:01

HBuilderX安装（uni-app和小程序开发）

下载HBuilderX 访问官方网站&#xff1a;https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本&#xff1a; Windows版&#xff08;推荐下载标准版&#xff09; Windows系统安装步骤 运行安装程序&#xff1a; 双击下载的.exe安装文件 如果出现安全提示&…...

编程新知 2025/8/6 0:07:38

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

编程新知 2025/9/3 18:59:01

HashMap中的put方法执行流程（流程图）

1 put操作整体流程 HashMap 的 put 操作是其最核心的功能之一。在 JDK 1.8 及以后版本中&#xff0c;其主要逻辑封装在 putVal 这个内部方法中。整个过程大致如下&#xff1a; 初始判断与哈希计算&#xff1a; 首先&#xff0c;putVal 方法会检查当前的 table&#xff08;也就…...

编程新知 2025/9/2 17:47:26

华为OD机考-机房布局

import java.util.*;public class DemoTest5 {public static void main(String[] args) {Scanner in new Scanner(System.in);// 注意 hasNext 和 hasNextLine 的区别while (in.hasNextLine()) { // 注意 while 处理多个 caseSystem.out.println(solve(in.nextLine()));}}priv…...

编程新知 2025/9/3 19:19:44

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

编程新知 2025/9/7 2:00:04

HubSpot推出与ChatGPT的深度集成引发兴奋与担忧

上周三&#xff0c;HubSpot宣布已构建与ChatGPT的深度集成&#xff0c;这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋&#xff0c;但同时也存在一些关于数据安全的担忧。 许多网络声音声称&#xff0c;这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...

编程新知 2025/9/4 3:13:15

验证redis数据结构

一、功能验证 1.验证redis的数据结构&#xff08;如字符串、列表、哈希、集合、有序集合等&#xff09;是否按照预期工作。 2、常见的数据结构验证方法&#xff1a; ①字符串&#xff08;string&#xff09; 测试基本操作 set、get、incr、decr 验证字符串的长度和内容是否正…...

编程新知 2025/7/13 10:03:49

二维数组 行列混淆区分 js

二维数组定义 行 row&#xff1a;是“横着的一整行” 列 column&#xff1a;是“竖着的一整列” 在 JavaScript 里访问二维数组 grid[i][j] 表示 第i行第j列的元素 let grid [[1, 2, 3], // 第0行[4, 5, 6], // 第1行[7, 8, 9] // 第2行 ];// grid[i][j] 表示 第i行第j列的…...

编程新知 2025/9/9 9:59:40

MySQL 数据库深度剖析：事务、SQL 优化、索引与 Buffer Pool

在当今数据驱动的时代&#xff0c;数据库作为数据存储与管理的核心&#xff0c;其性能与可靠性至关重要。MySQL 作为一款广泛使用的开源数据库&#xff0c;在众多应用场景中发挥着关键作用。在这篇博客中&#xff0c;我将围绕 MySQL 数据库的核心知识展开&#xff0c;涵盖事务及…...

编程新知 2025/9/2 10:26:15

Tableau for mac 驱动

Tableau 驱动程序安装指南 对于希望在 Mac OS 上使用 Tableau 进行数据分析的用户来说&#xff0c;确保正确安装相应的驱动程序至关重要。Tableau 支持多种数据库连接方式&#xff0c;并提供官方文档指导如何设置这些连接。 安装适用于 Mac 的 JDBC 或 ODBC 驱动程序 为了使…...

编程新知 2025/9/3 17:09:38