【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 非空断言
含义:非空断言用!表示,它用来断定某变量一定不是null和 undefined。
如果不做非空判断则会直接报错,具体如下:
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】类型断言-类型的声明和转换的总结,如果对你有帮助,请不要吝啬你的小手给我狠狠的点赞、关注加分享。
相关文章:
【TypeScript】类型断言-类型的声明和转换(五)
【TypeScript】类型断言-类型的声明和转换(五) 【TypeScript】类型断言-类型的声明和转换(五)一、简介二、断言形式2.1 尖括号语法2.2 as形式 三、断言类型3.1 非空断言3.2 肯定断言-肯定化保证赋值3.3 将任何类型断言为any3.4 调…...
行业追踪,2023-08-10
自动复盘 2023-08-10 凡所有相,皆是虚妄。若见诸相非相,即见如来。 k 线图是最好的老师,每天持续发布板块的rps排名,追踪板块,板块来开仓,板块去清仓,丢弃自以为是的想法,板块去留让…...
Nodejs下动态加载文件夹下的文件模块
个人博客 Nodejs下动态加载文件夹下的文件模块 个人博客,求关注,如果有不够清晰的,麻烦指出来,如果有很不正确的,多谢批评。 文章概叙 本文应用的场景是读取指定文件夹下面的所有文件,然后做操作&#…...
C#实现旋转图片验证码
开发环境:C#,VS2019,.NET Core 3.1,ASP.NET Core 1、建立一个验证码控制器 新建两个方法Create和Check,Create用于创建验证码(返回1张图片和令牌),Check用于验证(验证图…...
MySQL—缓存
目录标题 为什么要有Buffer Poolbuffer pool有多大buffer pool缓存什么 如何管理Buffer Pool如何管理空闲页如何管理脏页如何提高缓存命中率预读失效buffer pool污染 脏页什么时候会被刷入到磁盘 为什么要有Buffer Pool 虽然说MySQL的数据是存储在磁盘中,但是也不能…...
IP提取器对比器
需求: 一个html 页面 ,有两个输入框 第一个输入框输入文本中包含多个ip,输入的ip是不规则的,需要使用正则表达式提取出 输入文本的ip地址 , 然后在第二个输入框中输入内容,并提取出内容的ip ,如…...
【Spring Boot】构建RESTful服务 — RESTful简介
RESTful简介 本节将从基础的概念开始介绍什么是RESTful、RESTful的特点、RESTful中的资源、HTTP Method、HTTP Status,还将介绍RESTful和SOAP到底有哪些区别。 1.什么是RESTful RESTful是目前流行的互联网软件服务架构设计风格。REST(Representationa…...
模仿火星科技 基于cesium+水平面积测量+可编辑
当您进入Cesium的编辑水平积测量世界,下面是一个详细的操作过程,帮助您顺利使用这些功能: 1. 创建提示窗: 启动Cesium应用,地图场景将打开,欢迎您进入编辑模式。 在屏幕的一角,一个友好的提…...
26.配电网规划——考虑潮流约束的配电网规划
MATLAB代码直达:26.多时段-考虑潮流约束的配电网规划 clc;clear;close all; %% 导入数据 load(data.mat); MGpowerxlsread(MG1-3.xlsx); % 微电网的日负荷曲线 nt3 ; % 变压所个数 Sn25; % 变电所容量 MVA G…...
【云原生】K8S集群
目录 一、调度约束1.1 POT的创建过程1.1调度过程 二、指定节点调度2.1 通过标签选择节点 三、亲和性3.1requiredDuringSchedulingIgnoredDuringExecution:硬策略3.1 preferredDuringSchedulingIgnoredDuringExecution:软策略3.3Pod亲和性与反亲和性3.4使…...
python接口自动化之自动发送测试报告邮件
前言 SMTP(Simple Mail Transfer Protocol)也就是简单邮件传输协议,是一种提供可靠且有效电子邮件传输的协议。python的smtplib模块就提供了一种很方便的途径发送电子邮件,它对smtp协议进行了简单的封装。 python发邮件主…...
umi出现“Cannot find module ‘umi-build-dev/lib/routes‘“ 错误
确认安装的 Umi 版本是否正确:首先,检查项目中 package.json 文件中的 umi 的版本号是否正确,确保版本号与项目所需的版本一致。清除缓存并重新安装依赖:可以尝试使用以下命令清除 npm 缓存并重新安装依赖: npm cache …...
Redis类型检查与命令多态
Redis中用于操作键的命令基本上可以分为两种类型。 其中一种命令可以对任何类型的键执行,比如说DEL命令、EXPIRE命令 、RENAME命令、TYPE命令、OBJECT命令等。 举个例子,以下代码就展示了使用DEL命令来删除三种不同类型的键: # 字符串键 redis> SE…...
mysql支持的xa具体指的是什么?
在MySQL中,XA指的是一种事务协议(eXtended Architecture),用于支持分布式事务。XA协议允许应用程序跨多个独立的数据库资源(例如多个MySQL实例)执行分布式事务。 具体来说,XA协议提供了以下关键…...
IntelliJ Idea 编译时控制台上中文输出乱码
猜测原因是IDEA启动时未指定编码信息,故与系统编码保持一致(windows中文系统默认为GBK编码),当以UTF-8编码进行编译在控制台会以GBK编码输出,从而导致乱码 解决方案 指定Idea启动时JVM的默认编码为UTF-8 Help -> Edit Custom Options P…...
锚框【目标检测】
生成多个锚框 假设输入图像高为h,宽为w,我们以图像每个像素为中心生成不同形状的锚框,缩放比 s∈(0,1],宽高比为r>0。那么锚框的宽度和高度分别为和。当中心位置给定时, 已知宽和高的锚框是确定的。缩放比为锚框高与图像高的比值,然后得到一个正方形锚框面积。 …...
001-Spring boot 启动内置Web容器分析
目录 代码入口上下文容器 加载web容器WebServercreateWebServergetWebServerFactory():getWebServer(): 执行WebServer#start自动配置读取配置修改配置 代码入口 上下文容器 SpringApplication.run(App.class); //追踪下去发现 context createApplicationContext…...
【Cocos Creator 项目实战 】消灭星星加强版(附带完整源码工程)
本文乃Siliphen原创,转载请注明出处 目录 概述 游戏整体流程 游戏框架设计 单一职责的类 主要流程控制类 核心玩法模块 UI: 游戏世界: 本文项目的代码组织结构 作者项目实践总结 场景只有一个入口脚本 尽量少在节点上挂载脚本 构…...
2023软件测试岗必问的100个面试题【含答案】
一、测试理论 1.什么是软件测试? 答:软件测试是通过执行预定的步骤和使用指定的数据,以确定软件系统在特定条件下是否满足预期的行为。 2.测试驱动开发(TDD)是什么? 答:测试驱动开发是一种开…...
MediaExtractor MediaCodec手动解码播放音乐
MediaExtractor MediaCodec手动解码播放音乐,笔记 private class DecodeAudio implements Runnable {Overridepublic void run() {//开始播放pcmaudioTrack.play();MediaExtractor extractor null;MediaCodec codec null;Log.i(TAG, "run: init");FileOutputStrea…...
反向工程与模型迁移:打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下,商品详情API作为连接电商平台与开发者、商家及用户的关键纽带,其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息(如名称、价格、库存等)的获取与展示,已难以满足市场对个性化、智能…...
无法与IP建立连接,未能下载VSCode服务器
如题,在远程连接服务器的时候突然遇到了这个提示。 查阅了一圈,发现是VSCode版本自动更新惹的祸!!! 在VSCode的帮助->关于这里发现前几天VSCode自动更新了,我的版本号变成了1.100.3 才导致了远程连接出…...
关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
渲染学进阶内容——模型
最近在写模组的时候发现渲染器里面离不开模型的定义,在渲染的第二篇文章中简单的讲解了一下关于模型部分的内容,其实不管是方块还是方块实体,都离不开模型的内容 🧱 一、CubeListBuilder 功能解析 CubeListBuilder 是 Minecraft Java 版模型系统的核心构建器,用于动态创…...
vue3 字体颜色设置的多种方式
在Vue 3中设置字体颜色可以通过多种方式实现,这取决于你是想在组件内部直接设置,还是在CSS/SCSS/LESS等样式文件中定义。以下是几种常见的方法: 1. 内联样式 你可以直接在模板中使用style绑定来设置字体颜色。 <template><div :s…...
屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!
5月28日,中天合创屋面分布式光伏发电项目顺利并网发电,该项目位于内蒙古自治区鄂尔多斯市乌审旗,项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站,总装机容量为9.96MWp。 项目投运后,每年可节约标煤3670…...
HBuilderX安装(uni-app和小程序开发)
下载HBuilderX 访问官方网站:https://www.dcloud.io/hbuilderx.html 根据您的操作系统选择合适版本: Windows版(推荐下载标准版) Windows系统安装步骤 运行安装程序: 双击下载的.exe安装文件 如果出现安全提示&…...
SiFli 52把Imagie图片,Font字体资源放在指定位置,编译成指定img.bin和font.bin的问题
分区配置 (ptab.json) img 属性介绍: img 属性指定分区存放的 image 名称,指定的 image 名称必须是当前工程生成的 binary 。 如果 binary 有多个文件,则以 proj_name:binary_name 格式指定文件名, proj_name 为工程 名&…...
保姆级教程:在无网络无显卡的Windows电脑的vscode本地部署deepseek
文章目录 1 前言2 部署流程2.1 准备工作2.2 Ollama2.2.1 使用有网络的电脑下载Ollama2.2.2 安装Ollama(有网络的电脑)2.2.3 安装Ollama(无网络的电脑)2.2.4 安装验证2.2.5 修改大模型安装位置2.2.6 下载Deepseek模型 2.3 将deepse…...
代码随想录刷题day30
1、零钱兑换II 给你一个整数数组 coins 表示不同面额的硬币,另给一个整数 amount 表示总金额。 请你计算并返回可以凑成总金额的硬币组合数。如果任何硬币组合都无法凑出总金额,返回 0 。 假设每一种面额的硬币有无限个。 题目数据保证结果符合 32 位带…...
