TypeScript断言

news2024/12/23 9:00:48

什么是断言?

        一个编译时语法,用于告诉编译器用户比编译器更加确定变量的类型,进而解除编译错误,类型断言有点类似于其他语言的类型转换,但它没有运行时的影响,只是在编译阶段起作用。所以,即使通过类型断言解除了编译错误,也不会影响运行错误。

        很难理解?来看个例子

        在 TS 的开发过程中, TS 会识别我们写的所有的内容, 然后会根据代码去识别你写的内容

const box = document.querySelector('.box')
console.log(box.innerHTML)

         根据业务场景,我们知道class=box的元素是真实存在的。所以不可能为空。但是TS不知道啊。

        当我们开发的时候, 在写代码的时候, 只要我们准确的告诉他, 我这个代码一定能获取到元素, 你不要管东管西的, 那么 TS 就不会在提示错误了。这就是断言。

        

AS语法

let val1 :any = 'abc';
let valLength1 :number  = (val1 as string).length;

比如上面的例子,我们需要让TS明白box是真实存在,且它是一个HTMLDivElement

const box = document.querySelector('.box')
console.log((box as HTMLDivElement).innerHTML)

尖括号” 语法

注意,尖括号在前面

let val2 :any = 'abc';
let valLength2 :number  = (<string>val2).length;

非空断言

  • 假如你不想写类型断言,或者不确定会不会有其他类型的可能性。
  • 且你知道它一定不为null和undefined

你可以试用非空断言。

const box = document.querySelector('.box')
console.log(box!.innerHTML)

再举个例子,当我们不清楚数组是数字数组Array<number>或字符串数组Array<string>。我们可以:

   for (let i = 0; i < list!.length; i++) {....}

确定赋值断言 

在开发中还有这样一种情况, 就是我们在初始定义某一个变量的时候, 有可能是不赋值的
在后面的代码或者函数内对其进行赋值, 然后再使用

// 初始化的时候不进行赋值
let n: number
n= 100
// 这里使用一下 x
console.log(n)

 这样子是不会报错的。但是如果你:

即使你执行了函数

 因为TS 不太清楚你的filln函数调用以后会对n 进行赋值。

此时我们可以用到确定赋值断言。

与其他断言不同,确定赋值断言是加在初始化声明的时候。

这里会确切告诉TS,这个变量我自己一定会赋值,这样今后TS 就会默认认为他一定有值
,也就不会提示错误了。

const断言

跟定义变量的关键字差不多。

let n: number = 100 as const

比较复杂,这里不展开讲解,有兴趣可以去看别的资料。

它的语法是一个类型断言,const代替类型名称(例如123 as const)。当我们用const断言构造新的文字表达式时,我们可以向语言发出信号:

  • 该表达式中的任何文字类型都不应该被扩展(例如,不应该从"hello"to 开始string)
  • 对象字面量获取readonly属性
  • 数组文字变成readonly元组

as const 中的 const 与我们声明常量时使用的 const区别:

const 常量声明是 ES6 的语法,对 TS 而言,它只能反映该常量本身是不可被重新赋值的,它的子属性仍然可以被修改,故 TS 只会对它们做松散的类型推断
as const 是 TS 的语法,它告诉 TS 它所断言的值以及该值的所有层级的子属性都是不可篡改的,故对每一级子属性都会做最严格的类型推断

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

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

相关文章

typescript删除array中的空值

使用.flat() 可以看到&#xff0c;调用之后空值被清清除了&#xff0c;如果本身就是1维数组就无所谓&#xff0c;但如果本身是多维数组&#xff0c;又不想数组维度被改变的话就需要传入0&#xff0c;才不会导致数据维度改变

如何启动股票量化系统QTYX-Python3.7/3.9环境安装Anaconda+Pycharm及TaLib

前言 我们的股票量化分析系统QTYX提供两种形式使用&#xff1a; EXE安装文件。好处是不需要安装Python环境&#xff0c;双击安装EXE文件就能使用QTYX的功能。Python源码。好处是可以学习和调试源码&#xff0c;并且在此基础上二次开发&#xff0c;把自己的想法加进去&#xff0…

Bigemap软件在农业上面的一些应用

在农业工作者平时的工作应用中 Bigemap可以帮助农业用户更好地管理土地、作物和水资源 &#xff1b;提高农业生产效率和质量 &#xff1b;以及 野外调查定位&#xff0c;地层分析论证&#xff0c;水文地质调查等&#xff0c; 大部分的农业用户在Bigemap软件上需要使用到以下 的…

ViTPose+:迈向通用身体姿态估计的视觉Transformer基础模型 | 京东探索研究院

身体姿态估计旨在识别出给定图像中人或者动物实例身体的关键点&#xff0c;除了典型的身体骨骼关键点&#xff0c;还可以包括手、脚、脸部等关键点&#xff0c;是计算机视觉领域的基本任务之一。目前&#xff0c;视觉transformer已经在识别、检测、分割等多个视觉任务上展现出来…

IOC和注解

想要学好spring&#xff0c;必须时时刻刻想着&#xff0c;spring的本质就是一个容器&#xff0c;放java对象的容器&#xff0c;java对象在spring容器中也叫做bean对象。 文章目录 一、spring介绍1、什么是框架2、框架的作用![在这里插入图片描述](https://img-blog.csdnimg.cn…

0014Java程序设计-springboot旅行景点推荐系统

摘要目 录概述1.1研究背景1.2 开发意义1.3 研究现状1.4 研究内容1.5 论文结构 系统实现开发环境 摘要 互联网的广泛运用给生活带来很多便捷。 因而&#xff0c;将旅游地介绍与现如今互联网紧密结合&#xff0c;利用Java技术搭建旅游地强烈推荐系统&#xff0c;完成旅游地强烈推…

港陆证券:电子竞技传来重磅消息!概念股上半年业绩普增

国际奥委会宣布建立电子竞技委员会。 据央视新闻报道&#xff0c;北京时间9月6日&#xff0c;国际奥委会在官网发布音讯&#xff0c;国际奥委会有史以来将初次展望电子竞技的未来&#xff0c;建立一个全新的电子竞技委员会。 国际奥委会主席巴赫表明&#xff0c;虚拟体育有着…

Geopy 笔记:计算距离

1 介绍 Geopy使用测地线距离或大圆距离来计算两点之间的地理距离&#xff0c;其中默认使用测地线距离&#xff08;geopy.distance.distance&#xff09; 大圆距离&#xff08;great_circle&#xff09;使用地球的球形模型&#xff0c;&#xff0c;半径为6371.0087714150598 公…

AJAX学习笔记9 搜索联想自动补全

AJAX学习笔记8 跨域问题及解决方案_biubiubiu0706的博客-CSDN博客 其实就一个功能 搜索联想 自动补全 键盘按下事件keydown 键盘弹起事件keyup 做模糊查询 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><t…

海外ASO优化之如何优化游戏应用

如果我们发布了一款手机游戏或者管理了一款手机游戏&#xff0c;那么需要确保我们的手机游戏对合适的人可见&#xff0c;目的是增加应用的下载量。 1、优化游戏元数据的关键词。 Apple和Google在应用商店中为我们提供有限的空间&#xff0c;来描述手机游戏及其优势。我们需要使…

事件派发触发以及自定义事件派发dispatchEvent-——————派发键盘事件

事件派发触发以及自定义事件派发dispatchEvent 首先DOM的方法 addEventListener() 和 removeEventListener()是用来分配和删除事件的函数。 这两个方法都需要三个参数&#xff0c;分别为&#xff1a;事件名称&#xff08;String&#xff09;、要触发的事件处理函数(Function)、…

Run in PaddleX!四步搞定10+任务场景36个精选产业模型开发与部署!

随着ChatGPT引领的AI破圈&#xff0c;各行各业掀起了AI落地的潮流&#xff0c;从智能客服、智能写作、智能监控&#xff0c;到智能医疗、智能家居、智能金融、智能农业&#xff0c;谁能快速将AI与传统业务相结合&#xff0c;谁就将成为企业数字化和智能化变革的优胜者。然而&am…

10、Kubernetes核心技术 - Label标签

目录 一、概述 二、Label Selector&#xff08;标签选择器&#xff09; 1)、基于等值&#xff08;Equality-based&#xff09; 2)、基于集合&#xff08;Set-based&#xff09; 三、Label相关操作 (1)、yaml文件定义标签 (2)、查看标签 (3)、筛选标签 (4)、添加标签 …

Unity VideoPlayer 指定位置开始播放

如果 source是 videoclip&#xff08;以下两种方式都可以&#xff09;&#xff1a; _videoPlayer.Play();Debug.Log("time: " _videoPlayer.clip.length);_videoPlayer.time 10; [SerializeField] VideoPlayer videoPlayer;public void SetClipWithTime(VideoClip…

iTOP-i.MX6ULL开发板修改 samba 配置文件

sudo vi /etc/samba/smb.conf 添加如下内容&#xff1a; 这些信息都是 samba 的说明和设置&#xff0c;把这些复制上&#xff0c;格式要设置对&#xff0c;使用 Tab 键缩进&#xff0c;然后把注释删 除&#xff0c;不然可能会出错。 [ubuntu_samba] comment arm ubuntu sa…

HashMap、LinkedHashMap和TreeMap:你真的了解它们吗?

亲爱的小伙伴们&#xff0c;大家好呀&#xff01;我是小米&#xff0c;一个热衷于技术分享的90后程序员。今天我要和大家聊聊一个在面试中经常会被问到的话题&#xff1a;HashMap、LinkedHashMap、TreeMap的区别。这可是一个非常重要的知识点&#xff0c;不仅在面试中会被频繁提…

linux运维(二)内存占用分析

一、centos内存高&#xff0c;查看占用内存, top命令详解 1.1: free 命令是 free 单位K free -m 单位M free -h 单位Gfree最常规的查看内存占用情况的命令 1.2: 参数说明 total 总物理内存 used 已经使用的内存 free 没有使用的内存 shared 多进程共享内存 buff/cache 读写…

IP应用场景查询API:深入了解网络用户行为的利器

前言 随着数字时代的不断发展&#xff0c;互联网已经成为人们生活的重要组成部分。而随着越来越多的业务和社交活动迁移到在线平台上&#xff0c;了解和理解网络用户行为变得至关重要。为了满足这个需求&#xff0c;IP 应用场景查询 API 崭露头角&#xff0c;成为深入了解网络…

通讯软件017——分分钟学会Kepware OPC UA Server配置

本文介绍如何配置Kepware OPC UA Server&#xff0c;通过本文可以对OPC UA的基本概念有所了解&#xff0c;掌握OPC UA的本质。更多通信资源请登录网信智汇(wangxinzhihui.com)。 1. 创建OPC UA Server 点击“OPC UA Configuration”&#xff0c;弹出配置界面。 点击“添加”&a…

云计算时代的采集利器

大家好&#xff01;在今天的知识分享中&#xff0c;我们将探讨一个在云计算环境中的爬虫应用利器——独享IP。如果你是一名爬虫程序员&#xff0c;或者对数据采集和网络爬虫有浓厚的兴趣&#xff0c;那么这篇文章将向你展示独享IP在云计算环境下的应用价值。 1. 什么是独享IP&…