TypeScript断言

什么是断言?

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

        很难理解?来看个例子

        在 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.mzph.cn/news/77773.shtml

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

相关文章

用Navicat备份Mysql演示系统数据库的时候出:Too Many Connections

今天用Navicat进行数据备份的时候&#xff0c;发现由于数据库连接数目过多导致连接锁定&#xff0c;这种情况在多人协同开发的场景中很常见。当然我这里也因为多个应用使用了数据库连接&#xff0c;所以出现了Too Many Connections。 可能是超过最大连接数了。 1、进入Navicat…

【nosql】redis之高可用(主从复制、哨兵、集群)搭建

redis群集有三种模式 redis群集有三种模式&#xff0c;分别是主从同步/复制、哨兵模式、Cluster集群&#xff0c;下面会讲解一下三种模式的工作方式&#xff0c;以及如何搭建cluster群集 ●主从复制&#xff1a;主从复制是高可用Redis的基础&#xff0c;哨兵和集群都是在主从…

学习笔记|定时器|STC中断|定时器时间计算|STC32G单片机视频开发教程(冲哥)|第十一集:定时器的作用和意义

文章目录 1.定时器的作用和意义定时器中断定时器是定时器和计数器的统称。 2.STC32G单片机定时器使用原理2.1 先设置功能为定时器/计数器(本质都是加法计数器)2.2、在定时器模式下&#xff0c;设置不分频或者12分频∶Tips&#xff1a;选择不分频还是12分频2.3、定时器的工作模式…

【腾讯云Cloud Studio实战训练营】戏说cloud studio

文章目录 前言产品概述项目体验登录空间模板模板项目体验 总结 前言 在奇幻世界中&#xff0c;存在着一片神秘的云海&#xff0c;被人们称为腾讯云云端开发环境 Cloud Studio。这片云海是一座巨大的浮岛&#xff0c;上面漂浮着一个集成式开发环境&#xff08;Integrated Devel…

自动化测试入门知识 —— 数据驱动测试

一、什么是数据驱动测试&#xff1f; 数据驱动测试是一种测试方法&#xff0c;它的核心思想是通过不同的测试数据来验证同一个测试逻辑。通常情况下&#xff0c;测试用例中的输入数据和预期结果会被提取出来&#xff0c;以便可以通过不同的测试数据进行重复执行。 数据驱动测…

分享一个复合故障数据集

复合故障数据集 1.本数据集采集了轴承从正常状态到故障状态的振动信号&#xff0c; 包含失效的原因&#xff1a;内圈磨损&#xff0c;保持架断裂&#xff0c;外圈磨损和外圈裂损。其中有单一类型故障、单一故障组合的复合故障等多种失效形式&#xff0c;可用于诊断滚动轴承早期…

飞行动力学 - 第22节-动稳定性与运动方程 之 基础点摘要

飞行动力学 - 第22节-动稳定性与运动方程 之 基础点摘要 1. 稳定性定义2. 动稳定性示意图3. 数值仿真结构框图4. 运动响应类型5. 参考资料 1. 稳定性定义 飞机在平衡状态&#xff08;静止或匀速运动&#xff09;受到扰动&#xff1a; 有回到初始状态的趋势&#xff1b;静稳定…

微信怎么定时发圈?

定时发圈的妙用 在合适的时间点发布新的产品、促销活动&#xff0c;不仅能够及时提醒用户品牌的存在&#xff0c;还可以引发用户的兴趣&#xff0c;增加品牌的曝光率。 选择最佳的发朋友圈时间段&#xff0c;以确保推广内容得到最大的曝光和关注&#xff0c;提高广告投放的效果…

录音怎么转换成mp3格式?支持二十多种格式

录音怎么转换成mp3格式&#xff1f;在我们的日常生活和工作中&#xff0c;录音是一项非常有用的工具&#xff0c;随着手机以及录音设备越来越普及化&#xff0c;让录音这件事情变得非常的简单&#xff0c;录音可以帮助我们解决非常多的事情。例如通过录音&#xff0c;我们可以记…

Redis十大数据类型

✅作者简介&#xff1a;大家好&#xff0c;我是Leo&#xff0c;热爱Java后端开发者&#xff0c;一个想要与大家共同进步的男人&#x1f609;&#x1f609; &#x1f34e;个人主页&#xff1a;Leo的博客 &#x1f49e;当前专栏&#xff1a; Java从入门到精通 ✨特色专栏&#xf…

无涯教程-JavaScript - CUMIPMT函数

描述 CUMIPMT函数返回start_period和end_period之间的贷款累计利息。 语法 CUMIPMT (rate, nper, pv, start_period, end_period, type)争论 Argument描述Required/OptionalRateThe interest rate.RequiredNperThe total number of payment periods.RequiredPvThe present …

SpringBoot原理-自动配置-概述

自动配置 SpringBoot的自动配置就是当Spring容器启动后&#xff0c;一些配置类、bean对象就会自动存入IOC容器中&#xff0c;不需要我们手动去声明&#xff0c;从而简化了开发&#xff0c;省去了繁琐的配置操作。启动一个SpringBoot项目后&#xff0c;观察如下

【C++杂货铺】优先级队列的使用指南与模拟实现

文章目录 一、priority_queue的介绍二、priority_queue的使用2.1 数组中的第k个最大元素 三、priority_queue模拟实现3.1 仿函数3.2 成员变量3.3 成员函数3.3.1 构造函数3.3.2 AdjustDown3.3.3 push3.3.4 AdjustUp3.3.5 pop3.3.6 empty3.3.7 size 四、结语 一、priority_queue的…

PBR纹理的10种贴图

PBR 是基于物理的渲染的首字母缩写。它试图通过模拟材料如何吸收和反射光&#xff0c;以模仿现实世界中的光流的方式产生视觉效果。最近的游戏引擎由于其逼真的效果而越来越多地使用 PBR 纹理。对于实时渲染&#xff0c;它们被认为是真实世界场景的最佳近似值。 推荐&#xff…

JAVA 从入门到起飞 day8 面向对象01

1.面向对象的介绍 老师的讲解&#xff1a; 面向&#xff1a;就相当于拿找 对象&#xff1a;能干活的东西 面向对象编程&#xff1a;拿东西过来做对应的事 我的理解: 让我们通过一个比喻来了解 JAVA 中的面向对象思想。 想象一下你正在建一座房子&#xff1a; 1. **类&#…

Jmeter系列进阶-获取图片验证码(4)

安装工具 通过ocrserver工具识别图片验证码&#xff0c;解压后 .exe双击启动即可。 jmeter中使用 &#xff08;1&#xff09;HTTP请求获取验证码 &#xff08;2&#xff09;在获取验证码图片的接口下面添加监听器》保存响应到文件&#xff1b;如下图&#xff1a; &#x…

Qt/C++音视频开发51-推流到各种流媒体服务程序

一、前言 最近将推流程序完善了很多功能,尤其是增加了对多种流媒体服务程序的支持,目前支持mediamtx、LiveQing、EasyDarwin、nginx-rtmp、ZLMediaKit、srs、ABLMediaServer等,其中经过大量的对比测试,个人比较建议使用mediamtx和ZLMediaKit,因为这两者支持的格式众多,不…

【Linux环境】编译器 gcc/g++的使用

​&#x1f47b;内容专栏&#xff1a; Linux操作系统基础 &#x1f428;本文概括&#xff1a; 预处理、编译、汇编、链接、动静态库、gcc选项等。 &#x1f43c;本文作者&#xff1a; 阿四啊 &#x1f438;发布时间&#xff1a;2023.9.13 背景知识 预处理&#xff08;进行宏替换…

Mobpush与A/B测试:覆盖多应用场景下的精细化运营神器

在信息爆炸的移动应用领域&#xff0c;实现长效稳定的用户增长的关键在于能够和用户建立互信、持久的联系。而优质的推送内容不仅可以提高用户参与度和留存率&#xff0c;还有助于增加收入、改善用户体验&#xff0c;以及建立强大的用户社区。但千人一面的推送很难同时满足不同…

算法|Day51 单调栈2

LeetCode 503- 下一个更大元素 II 题目链接&#xff1a;力扣&#xff08;LeetCode&#xff09;官网 - 全球极客挚爱的技术成长平台 题目描述&#xff1a;给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 num…