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

typescript 类型断言

news 2026/2/10 20:21:07

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

rknn优化教程（二）

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

编程新知 2025/6/11 15:25:30

ffmpeg（四）：滤镜命令

FFmpeg 的滤镜命令是用于音视频处理中的强大工具&#xff0c;可以完成剪裁、缩放、加水印、调色、合成、旋转、模糊、叠加字幕等复杂的操作。其核心语法格式一般如下&#xff1a; ffmpeg -i input.mp4 -vf "滤镜参数" output.mp4或者带音频滤镜&#xff1a; ffmpeg…...

编程新知 2026/2/4 23:47:47

在Ubuntu中设置开机自动运行（sudo）指令的指南

在Ubuntu系统中&#xff0c;有时需要在系统启动时自动执行某些命令&#xff0c;特别是需要 sudo权限的指令。为了实现这一功能&#xff0c;可以使用多种方法&#xff0c;包括编写Systemd服务、配置 rc.local文件或使用 cron任务计划。本文将详细介绍这些方法&#xff0c;并提供…...

编程新知 2025/12/23 11:20:24

Python爬虫（一）：爬虫伪装

一、网站防爬机制概述 在当今互联网环境中&#xff0c;具有一定规模或盈利性质的网站几乎都实施了各种防爬措施。这些措施主要分为两大类&#xff1a; 身份验证机制&#xff1a;直接将未经授权的爬虫阻挡在外反爬技术体系&#xff1a;通过各种技术手段增加爬虫获取数据的难度…...

编程新知 2026/1/30 20:42:46

Maven 概述、安装、配置、仓库、私服详解

目录 1、Maven 概述 1.1 Maven 的定义 1.2 Maven 解决的问题 1.3 Maven 的核心特性与优势 2、Maven 安装 2.1 下载 Maven 2.2 安装配置 Maven 2.3 测试安装 2.4 修改 Maven 本地仓库的默认路径 3、Maven 配置 3.1 配置本地仓库 3.2 配置 JDK 3.3 IDEA 配置本地 Ma…...

编程新知 2026/2/8 1:58:01

JavaScript基础-API 和 Web API

在学习JavaScript的过程中&#xff0c;理解API&#xff08;应用程序接口&#xff09;和Web API的概念及其应用是非常重要的。这些工具极大地扩展了JavaScript的功能&#xff0c;使得开发者能够创建出功能丰富、交互性强的Web应用程序。本文将深入探讨JavaScript中的API与Web AP…...

编程新知 2025/8/21 23:03:46

django blank 与 null的区别

1.blank blank控制表单验证时是否允许字段为空 2.null null控制数据库层面是否为空 但是&#xff0c;要注意以下几点&#xff1a; Django的表单验证与null无关&#xff1a;null参数控制的是数据库层面字段是否可以为NULL&#xff0c;而blank参数控制的是Django表单验证时字…...

编程新知 2025/7/7 3:34:13

算法打卡第18天

从中序与后序遍历序列构造二叉树 (力扣106题) 给定两个整数数组 inorder 和 postorder &#xff0c;其中 inorder 是二叉树的中序遍历&#xff0c; postorder 是同一棵树的后序遍历&#xff0c;请你构造并返回这颗 二叉树 。 示例 1: 输入&#xff1a;inorder [9,3,15,20,7…...

编程新知 2026/2/9 22:26:48

绕过 Xcode？使用 Appuploader和主流工具实现 iOS 上架自动化

iOS 应用的发布流程一直是开发链路中最“苹果味”的环节&#xff1a;强依赖 Xcode、必须使用 macOS、各种证书和描述文件配置……对很多跨平台开发者来说&#xff0c;这一套流程并不友好。 特别是当你的项目主要在 Windows 或 Linux 下开发&#xff08;例如 Flutter、React Na…...

编程新知 2026/1/10 11:35:24

[USACO23FEB] Bakery S

题目描述 Bessie 开了一家面包店! 在她的面包店里&#xff0c;Bessie 有一个烤箱&#xff0c;可以在 t C t_C tC​ 的时间内生产一块饼干或在 t M t_M tM​ 单位时间内生产一块松糕。 ( 1 ≤ t C , t M ≤ 10 9 ) (1 \le t_C,t_M \le 10^9) (1≤tC​,tM​≤109)。由于空间…...

编程新知 2026/1/10 19:08:23