TypeScript学习笔记2-联合类型、类型断言

联合类型

联合类型:顾名思义,简单的说就是多种类型联合起来

栗子1:运用在函数中

栗子2:运用在dom上(取不到值时可能为null类型)

栗子3:定时器是个常用例子

在TypeScript中,联合类型允许一个变量可以存储多种不同类型的值。通过使用竖线 来连接多个类型,创建联合类型的语法形式为`type1 | type2 | type3`。

类型断言

类型断言:简单来说就是人为将某一种不确定的类型断言为确定的类型,这只是在编译器层面的欺骗行为。

经典案例!

let img = document.getElementById("#img")

在底层原理中,document.getElementById返回的就是一个 HTMLElement | null 的值

这个时候,如果我们直接进行下面这个操作是会报错的

img.src = xxxx;
//或者
img.height = xxx;

因为null不能这样子去调用src或者height什么的。

但我们又难以避免对获得的元素的属性进行操作,这个时候就需要进行类型断言

let img = document.getElementById("#img") as HTMLImageElement
img.src = xxx;//没问题!let img = <HTMLImageElement>document.getElementById("#img")
img.src = xxx;//没问题!

两种写法

  • as语法:value as Type (用的更多)
  • 尖括号语法:<Type>value

在TypeScript中,类型断言允许开发人员手动指定一个值的类型,即告诉编译器某个变量的确切类型。这在某些情况下是非常有用的,尤其是当开发人员比编译器更了解变量的类型时。

无论是尖括号语法还是as语法,它们实际上是告诉编译器"相信我,我知道这个变量的类型是什么"。

注意!:类型断言只在编译阶段起作用,不会对真实的运行时类型产生影响。因此,在进行类型断言时,应确保断言的类型是正确的,以避免潜在的类型错误。

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

一切皆是为了交流-DDD通用语言

通用语言是什么&#xff1f; 通用语言是一种在特定领域内的沟通方式&#xff0c;可以由文字、语言、手势、图像等一切与达到沟通目的的元素组成。 比如&#xff0c;在中国内&#xff0c;方言是闽南的小王与方言是粤语的小张进行交流&#xff0c;那么&#xff0c;普通话是他们…

2024年MathorCup妈妈杯数学建模思路D题思路解析+参考成品

1 赛题思路 (赛题出来以后第一时间在群内分享&#xff0c;点击下方群名片即可加群) 2 比赛日期和时间 报名截止时间&#xff1a;2024年4月11日&#xff08;周四&#xff09;12:00 比赛开始时间&#xff1a;2024年4月12日&#xff08;周五&#xff09;8:00 比赛结束时间&…

室友打团太吵?一条命令让它卡死

「作者主页」&#xff1a;士别三日wyx 「作者简介」&#xff1a;CSDN top100、阿里云博客专家、华为云享专家、网络安全领域优质创作者 「推荐专栏」&#xff1a;更多干货&#xff0c;请关注专栏《网络安全自学教程》 SYN Flood 1、hping3实现SYN Flood1.1、主机探测1.2、扫描端…

Web后端搭建

目录 一 搭建服务器端 1.1安装服务器软件 1.2检查环境是否配置 1.3安装Tomcat 二 创建并发Web项目 2.1创建一个java项目 三 创建Servlet 前端程序如何才能访问到后端程序呢&#xff0c;这时候我们就需要web服务器来解决&#xff1a;将后端程序部署到服务器中&#xff0c…

SpringCloud Alibaba Sentinel 简介和安装

一、前言 接下来是开展一系列的 SpringCloud 的学习之旅&#xff0c;从传统的模块之间调用&#xff0c;一步步的升级为 SpringCloud 模块之间的调用&#xff0c;此篇文章为第十三篇&#xff0c;即介绍 SpringCloud Alibaba Sentinel 简介和安装。 二、Sentinel 简介 2.1 Sent…

Docker容器(五)Docker Compose

一、概述 1.1介绍 Docker Compose是Docker官方的开源项目&#xff0c;负责实现对Docker容器集群的快速编排。Compose 是 Docker 公司推出的一个工具软件&#xff0c;可以管理多个 Docker 容器组成一个应用。你需要定义一个 YAML 格式的配置文件docker-compose.yml&#xff0c;…

【Redis 知识储备】冷热分离架构 -- 分布系统的演进(5)

冷热分离架构 简介出现原因架构工作原理技术案例架构优缺点 简介 引入缓存, 实行冷热分离, 将热点数据放到缓存中快速响应 (如存储到 Redis中) 出现原因 海量的请求导致数据库负载过高, 站点响应再读变慢 架构工作原理 多了缓存服务器, 对于热点数据全部到缓存中, 不常用数…

Linux配置本地yum源,高效便捷,2024Linux运维者真的太难了

6.修改yum配置 备份你的原镜像文件&#xff0c;以免出错后可以恢复 mkdir /etc/yum.repos.d/backup && mv /etc/yum.repos.d/*.repo /etc/yum.repos.d/backup/ 7.添加一个新的yum源配置文件 vi /etc/yum.repos.d/dvd.repo 添加&#xff1a; [RHEL] nameRHEL7 b…

Linux CPU利用率

Linux CPU利用率 在线上服务器观察线上服务运行状态的时候&#xff0c;绝大多数人都是喜欢先用 top 命令看看当前系统的整体 cpu 利用率。例如&#xff0c;随手拿来的一台机器&#xff0c;top 命令显示的利用率信息如下 这个输出结果说简单也简单&#xff0c;说复杂也不是那么…

新零售SaaS架构:客户管理系统架构设计(万字图文总结)

什么是客户管理系统&#xff1f; 客户管理系统&#xff0c;也称为CRM&#xff08;Customer Relationship Management&#xff09;&#xff0c;主要目标是建立、发展和维护好客户关系。 CRM系统围绕客户全生命周期的管理&#xff0c;吸引和留存客户&#xff0c;实现缩短销售周…

性能分析-docker知识

docker的相关概念 docker是一个做系统虚拟化的软件&#xff0c;跟vmware类似&#xff0c;虚拟出来的也是操作系统。我们现在在企业中&#xff0c; 使用docker虚拟出来的系统&#xff0c;大多都是linux系统。 docker镜像image&#xff1a;就是虚拟一个docker容器需要的操作系统…

【QT+QGIS跨平台编译】063:【qca-softstore+Qt跨平台编译】(一套代码、一套框架,跨平台编译)

点击查看专栏目录 文章目录 一、qca-softstore介绍二、QCA下载三、文件分析四、pro文件五、编译实践5.1 windows下编译5.2 linux下编译5.3 macos下编译一、qca-softstore介绍 QCA-Softstore 是一个软件证书存储插件,它是为 QCA 框架设计的。这个插件提供了一个简单的持久化证书…