【TypeScript】类型断言-类型的声明和转换(五)


【TypeScript】类型断言-类型的声明和转换(五)



在这里插入图片描述

    • 【TypeScript】类型断言-类型的声明和转换(五)
        • 一、简介
        • 二、断言形式
          • 2.1 尖括号语法
          • 2.2 as形式
        • 三、断言类型
          • 3.1 非空断言
          • 3.2 肯定断言-肯定化保证赋值
          • 3.3 将任何类型断言为any
          • 3.4 调用函数时将参数和返回值断言成精确的值

一、简介

TypeScript 断言是指在编写代码时,开发者能够告诉编译器某个值的具体类型,从而可以在编译阶段强制类型检查。

为什么要有 断言 这个概念?TS中并不能判断在使用联合类型时具体是哪种类型?当我们不知道是什么类型的情况下要使用某个类型特有的属性或者方法,那么就可以用断言来实现,它实际上是对编辑器做了提前告知的行为,但是并不能保证运行中报错。这其实在某些强类型语言中,类似于强制类型转换的操作。

主要有两种方式来实现:

  • 尖括号语法
  • as语法

二、断言形式

2.1 尖括号语法

尖括号语法:开发者可以使用 “<类型>” 的方式指定某个值的类型,例如:

let someValue: any = "This is a string";
let strLength: number = (<string>someValue).length;

anyValue是any类型,在使用时候将其断言为string类型。从而继续执行接下来的操作。


let anyValue:string | number = 'zhangsan';
let length:number = (<string>anyValue).length;//0

anyValue是string或者number联合类型,在使用时候将其断言为string类型。

需要注意的是,使用断言虽然能避免编译中的报错,但是却避免不了运行中的报错,如下面代码:

type Count = number | string;
function func(val:Count):string{return  (<string>val).substr(0,1)
}
func(1)

可以看到在编辑器中并没有报错,但熟悉代码的效果伴一眼就能看看出这是有问题的代码。
打开控制台或编辑器运行这段代码,显示出错

在这里插入图片描述

所以除非确切的知道变量的数据类型,否则不要使用类型断言,这是因为类型断言会让 TypeScript 编译器 将变量当做指定的类型,而不管它实际的类型,在程序运行时可能有类型错误,因此使用断言需要慎用

2.2 as形式

as语法:开发者也可以使用 值 as 类型 的语法进行类型断言,例如:

let someValue: any = "This is a string";
let strLength: number = (someValue as string).length;

使用断言的好处是可以在编译阶段捕获一些潜在的类型错误,从而提高代码的可靠性。不过需要注意,过度使用断言会导致代码可读性和可维护性降低,因此需要谨慎使用

as形式的断言在实际开发中比较推荐。

三、断言类型

3.1 非空断言

含义:非空断言用!表示,它用来断定某变量一定不是nullundefined
如果不做非空判断则会直接报错,具体如下:

type ClassTime = () => number;
const start = (ClassTime: ClassTime | undefined | null) => {const time = ClassTime(); console.log(time);
}

请添加图片描述

我们进行非空断言处理,修改调用方式为 ClassTime!();

type ClassTime = () => number;
const start = (ClassTime: ClassTime | undefined | null) => {const time = ClassTime!(); console.log(time);
}

现在,在编译时就不会报错了。但是还是需要注意,当在运行时,真正的传入了null或者undefined时,则会出现异常。请务必注意。

3.2 肯定断言-肯定化保证赋值

含义:允许在实例属性或者变量声明后面放置一个 !号,从而告诉 TS该属性会被明确地赋值。
错误示范,我们在对变量赋值之前就使用变量,就会报错。

let score: number;
startClass();
console.log('' + score); // 使用前赋值
function startClass() {score = 5;
}

在这里插入图片描述
如果我们非常肯定我们会进行赋值,那么怎么避免这种现象呢?我们可以在变量声明的时候就告诉编辑器该属性一定会被赋值,即在变量名后面加个!符号.

let score!: number;
startClass();
console.log('' + score); // 使用前赋值
function startClass() {score = 5;
}

此时,再去执行编译,则不会出现定义前使用的错误提示了。

3.3 将任何类型断言为any

为什么会有这种需求呢?其实想想,实际应用中很多小伙伴为了节省时间,就会进行一系列的any断言,比如以下案例:我们知道obj一定是有值的,请求接口后赋值给obj,所以一定是有值的,但是我们直接赋值,就会报错

const obj = {};
obj.name = 'zhangsan';
obj.age = 19;

在这里插入图片描述
那我们使用any断言处理,就不会报错了

const obj: any = {};
obj.name = 'zhangsan';
obj.age = 19;
3.4 调用函数时将参数和返回值断言成精确的值

如果我们的函数处理完结果后,我们能够确定其返回值,那就应该将返回值断言为精确值。

如下函数:

function func(val:any):any{return 1
}
func(1)

调用函数时我们改成以下所示,这样方便我们维护代码,约束了传参和函数返回值,不能any走天下。根据上述函数定义,我们就能够断言具体返回值。

let data = <number>func(<string>'zhangsan')
let data2 = <number>func(<number>1)

编译运行后的结果如下:

function func(val) {return 1;
}
var data = func('zhangsan');
var data2 = func(1);




以上就是【TypeScript】类型断言-类型的声明和转换的总结,如果对你有帮助,请不要吝啬你的小手给我狠狠的点赞、关注加分享。





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

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

相关文章

6.5.tensorRT高级(1)-alphapose模型导出、编译到推理(无封装)

目录 前言1. alphapose导出2. alphapose推理3. 讨论总结 前言 杜老师推出的 tensorRT从零起步高性能部署 课程&#xff0c;之前有看过一遍&#xff0c;但是没有做笔记&#xff0c;很多东西也忘了。这次重新撸一遍&#xff0c;顺便记记笔记。 本次课程学习 tensorRT 高级-alphap…

Java基础(八)二维数组

数组 二、二维数组 1. 二维数组使用步骤 定义二维数组 格式&#xff1a;数据类型 数组名[][]; 或 数据类型[][] 数组名; int scores[][]; int[][] scores;为二维数组元素分配内存 格式&#xff1a;数据类型 数组名[][]; 或 数据类型[][] 数组名; int scores[][]; scores …

什么是设计模式?

目录 概述: 什么是模式&#xff01;&#xff01; 为什么学习模式&#xff01;&#xff01; 模式和框架的比较&#xff1a; 设计模式研究的历史 关于pattern的历史 Gang of Four(GoF) 关于”Design”Pattern” 重提&#xff1a;指导模式设计的三个概念 1.重用(reuse)…

基于微信小程序的传染病酒店隔离平台设计与实现(Java+spring boot+MySQL+微信小程序)

获取源码或者论文请私信博主 演示视频&#xff1a; 基于微信小程序的传染病酒店隔离平台设计与实现&#xff08;Javaspring bootMySQL微信小程序&#xff09; 使用技术&#xff1a; 前端&#xff1a;html css javascript jQuery ajax thymeleaf 微信小程序 后端&#xff1a;…

【windows】windows上如何使用linux命令?

前言 windows上的bat命令感觉不方便&#xff0c;想在windows上使用linux命令。 有人提供了轮子&#xff0c;本文简单介绍一些该轮子的安装与使用&#xff0c;希望能够帮助到和我有一起需求的网友。 我的答案是busybox。 1.安装busybox.exe 在这个网站上安装busybox busyb…

两个状态的马尔可夫链

手动推导如下公式。 证明&#xff1a; 首先将如下矩阵对角化&#xff1a; { 1 − a a b 1 − b } \begin {Bmatrix} 1-a & a \\ b & 1-b \end {Bmatrix} {1−ab​a1−b​} (1)求如下矩阵的特征值&#xff1a; { 1 − a a b 1 − b } { x 1 x 2 } λ { x 1 x 2 }…

vscode终端背景颜色修改以及报错信息颜色修改

引言 刚从pycharm转到vscode上时&#xff0c;很不喜欢vscode终端信息一片白色&#xff0c;于是想尽办法去修改vscode终端风格 这里提供vscode终端背景颜色的修改和vscode终端报错提示信息颜色的修改方法 (1)vscode终端背景颜色优化 步骤一&#xff0c;ctrlshiftp打开设置搜索…

Unity-UGUI优化策略

界面出栈规则&#xff1a; 界面目录导航、策划界面回退需求造成界面套娃问题&#xff0c;夹带一系列层级问题&#xff0c;应该和策划进行友好沟通&#xff0c;避免界面不合理的出栈入栈规则 overdraw&#xff1a; 尽量减少同屏 半透明物体渲染 Unity 之 UGUI优化&#xff08;…

iOS开发-JsonModel的学习及使用

IOS JsonModel的学习及使用 当我们从服务端获取到json数据后的时候&#xff0c;我们需要在界面上展示或者保存起来&#xff0c;下面来看下直接通过NSDictionary取出数据的情况。 NSDictionary直接取出数据的诟病。 NSString *name [self.responseObj objectForKey:"nam…

github上有哪些值得读源码的react项目?

前言 下面是我整理的关于值得一读源码的react项目&#xff0c;希望对你有所帮助~ 1、 calcom Star: 21.6k calcom是一个开源的计算器应用程序。它提供了基本的数学运算功能&#xff0c;例如加法、减法、乘法和除法&#xff0c;还支持 科学计算、进制转换和单位转换等高级功能…

vmwera中安装的centos8出现ifconfig不可用

刚刚在虚拟机中装好centos结果发现自己的ifconfig命令不可用。 看一下环境变量里有没有ifconfig命令的路径&#xff0c;因为ifconfig是在/sbin路径下的&#xff0c;root用户登录进去才可以运行&#xff0c;先看一下root用户的环境变量。 root用户的环境变量里是有/sbin路径的&a…

java.lang.ClassNotFoundException: com.mysql.cj.jdbc.Driver的解决办法

springcloudAlibaba项目连接mysql时&#xff08;mysql版本8.0.31&#xff0c;Springboot2.2.2,spring cloud Hoxton.SR1,spring cloud alibaba 2.1.0.RELEASE&#xff09;&#xff0c;驱动名称报红&#xff0c;配置如下&#xff1a; 原因&#xff1a;引入的jdbc驱动包和使用的m…

pytest fixture 用于teardown工作

fixture通过scope参数控制setup级别&#xff0c;setup作为用例之前前的操作&#xff0c;用例执行完之后那肯定也有teardown操作。这里用到fixture的teardown操作并不是独立的函数&#xff0c;用yield关键字呼唤teardown操作。 举个例子&#xff1a; 输出&#xff1a; 说明&…

MongoDB文档-基础使用-在客户端(dos窗口)/可视化工具中使用MongoDB基础语句

阿丹&#xff1a; 本文章将描述以及研究mongodb在客户端的基础应用以及在spring-boot中整合使用mongodb来完成基本的数据增删改查。 传送门&#xff1a; MongoDB文档--基本概念_一单成的博客-CSDN博客 MongoDB文档--基本安装-linux安装&#xff08;mongodb环境搭建&#xff0…

Celery嵌入工程的使用

文章目录 1.config 1.1 通过app.conf进行配置1.2 通过app.conf.update进行配置1.3 通过配置文件进行配置1.4 通过配置类的方式进行配置2.任务相关 2.1 任务基类(base)2.2 任务名称(name)2.3 任务请求(request)2.4 任务重试(retry) 2.4.1 指定最大重试次数2.4.2 设置重试间隔时间…

RTC晶振两端要不要挂电容

发现GD32的RTC晶振两端需要挂电容&#xff0c;STM32的RTC晶振两端不需要挂电容。 STM32的RTC晶振两端&#xff0c;不需要挂电容&#xff0c;这样晶振启振很容易&#xff0c;挂大了&#xff0c;却难启动&#xff0c;且温度越低&#xff0c;启动越难。 有人说负载电容为6pF的晶振…

分享21年电赛F题-智能送药小车-做题记录以及经验分享

这里写目录标题 前言一、赛题分析1、车型选择2、巡线1、OpenMv循迹2、灰度循迹 3、装载药品4、识别数字5、LED指示6、双车通信7、转向方案1、开环转向2、位置环速度环闭环串级转向3、MPU6050转向 二、调试经验分享1、循迹2、识别数字3、转向4、双车通信5、逻辑处理6、心态问题 …

IoTDB1.X windows运行失败问题的处理

在windows运行 IoTDB1.x时 会出现如图所示的问题 为什么会出现这样的问题&#xff1f;java没有安装还是未调用成功&#xff0c;我是JAVA8~11~17各种更换都未能解决问题&#xff0c;最后对其bat文件进行查看&#xff0c;发现在conf\datanode-env.bat、conf\confignode-env.bat这…

深入学习JVM —— GC垃圾回收机制

前言 前面荔枝已经梳理了有关JVM的体系结构和类加载机制&#xff0c;也详细地介绍了JVM在类加载时的双亲委派模型&#xff0c;而在这篇文章中荔枝将会比较详细地梳理有关JVM学习的另一大重点——GC垃圾回收机制的相关知识&#xff0c;重点了解的比如对象可达性的判断、四种回收…

uniapp+vue3项目中使用vant-weapp

创建项目 通过vue-cli命令行创建项目 Vue3/Vite版要求 node 版本^14.18.0 || >16.0.0 uni-app官网 (dcloud.net.cn) npx degit dcloudio/uni-preset-vue#vite my-vue3-project打开项目 点击顶部菜单栏终端/新建终端 执行安装依赖指令 yarn install 或 npm install 安装vant…