当前位置: 首页 > news >正文

【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】类型断言-类型的声明和转换的总结,如果对你有帮助,请不要吝啬你的小手给我狠狠的点赞、关注加分享。





相关文章:

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

【TypeScript】类型断言-类型的声明和转换&#xff08;五&#xff09; 【TypeScript】类型断言-类型的声明和转换&#xff08;五&#xff09;一、简介二、断言形式2.1 尖括号语法2.2 as形式 三、断言类型3.1 非空断言3.2 肯定断言-肯定化保证赋值3.3 将任何类型断言为any3.4 调…...

行业追踪,2023-08-10

自动复盘 2023-08-10 凡所有相&#xff0c;皆是虚妄。若见诸相非相&#xff0c;即见如来。 k 线图是最好的老师&#xff0c;每天持续发布板块的rps排名&#xff0c;追踪板块&#xff0c;板块来开仓&#xff0c;板块去清仓&#xff0c;丢弃自以为是的想法&#xff0c;板块去留让…...

Nodejs下动态加载文件夹下的文件模块

个人博客 Nodejs下动态加载文件夹下的文件模块 个人博客&#xff0c;求关注&#xff0c;如果有不够清晰的&#xff0c;麻烦指出来&#xff0c;如果有很不正确的&#xff0c;多谢批评。 文章概叙 本文应用的场景是读取指定文件夹下面的所有文件&#xff0c;然后做操作&#…...

C#实现旋转图片验证码

开发环境&#xff1a;C#&#xff0c;VS2019&#xff0c;.NET Core 3.1&#xff0c;ASP.NET Core 1、建立一个验证码控制器 新建两个方法Create和Check&#xff0c;Create用于创建验证码&#xff08;返回1张图片和令牌&#xff09;&#xff0c;Check用于验证&#xff08;验证图…...

MySQL—缓存

目录标题 为什么要有Buffer Poolbuffer pool有多大buffer pool缓存什么 如何管理Buffer Pool如何管理空闲页如何管理脏页如何提高缓存命中率预读失效buffer pool污染 脏页什么时候会被刷入到磁盘 为什么要有Buffer Pool 虽然说MySQL的数据是存储在磁盘中&#xff0c;但是也不能…...

IP提取器对比器

需求&#xff1a; 一个html 页面 &#xff0c;有两个输入框 第一个输入框输入文本中包含多个ip&#xff0c;输入的ip是不规则的&#xff0c;需要使用正则表达式提取出 输入文本的ip地址 &#xff0c; 然后在第二个输入框中输入内容&#xff0c;并提取出内容的ip &#xff0c;如…...

【Spring Boot】构建RESTful服务 — RESTful简介

RESTful简介 本节将从基础的概念开始介绍什么是RESTful、RESTful的特点、RESTful中的资源、HTTP Method、HTTP Status&#xff0c;还将介绍RESTful和SOAP到底有哪些区别。 1.什么是RESTful RESTful是目前流行的互联网软件服务架构设计风格。REST&#xff08;Representationa…...

模仿火星科技 基于cesium+水平面积测量+可编辑

​ 当您进入Cesium的编辑水平积测量世界&#xff0c;下面是一个详细的操作过程&#xff0c;帮助您顺利使用这些功能&#xff1a; 1. 创建提示窗&#xff1a; 启动Cesium应用&#xff0c;地图场景将打开&#xff0c;欢迎您进入编辑模式。 在屏幕的一角&#xff0c;一个友好的提…...

26.配电网规划——考虑潮流约束的配电网规划

MATLAB代码直达&#xff1a;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&#xff1a;硬策略3.1 preferredDuringSchedulingIgnoredDuringExecution&#xff1a;软策略3.3Pod亲和性与反亲和性3.4使…...

python接口自动化之自动发送测试报告邮件

前言 ​ SMTP&#xff08;Simple Mail Transfer Protocol&#xff09;也就是简单邮件传输协议&#xff0c;是一种提供可靠且有效电子邮件传输的协议。python的smtplib模块就提供了一种很方便的途径发送电子邮件&#xff0c;它对smtp协议进行了简单的封装。 ​ python发邮件主…...

umi出现“Cannot find module ‘umi-build-dev/lib/routes‘“ 错误

确认安装的 Umi 版本是否正确&#xff1a;首先&#xff0c;检查项目中 package.json 文件中的 umi 的版本号是否正确&#xff0c;确保版本号与项目所需的版本一致。清除缓存并重新安装依赖&#xff1a;可以尝试使用以下命令清除 npm 缓存并重新安装依赖&#xff1a; npm cache …...

Redis类型检查与命令多态

Redis中用于操作键的命令基本上可以分为两种类型。 其中一种命令可以对任何类型的键执行&#xff0c;比如说DEL命令、EXPIRE命令 、RENAME命令、TYPE命令、OBJECT命令等。 举个例子&#xff0c;以下代码就展示了使用DEL命令来删除三种不同类型的键: # 字符串键 redis> SE…...

mysql支持的xa具体指的是什么?

在MySQL中&#xff0c;XA指的是一种事务协议&#xff08;eXtended Architecture&#xff09;&#xff0c;用于支持分布式事务。XA协议允许应用程序跨多个独立的数据库资源&#xff08;例如多个MySQL实例&#xff09;执行分布式事务。 具体来说&#xff0c;XA协议提供了以下关键…...

IntelliJ Idea 编译时控制台上中文输出乱码

猜测原因是IDEA启动时未指定编码信息&#xff0c;故与系统编码保持一致&#xff08;windows中文系统默认为GBK编码&#xff09;,当以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()&#xff1a;getWebServer(): 执行WebServer#start自动配置读取配置修改配置 代码入口 上下文容器 SpringApplication.run(App.class); //追踪下去发现 context createApplicationContext…...

【Cocos Creator 项目实战 】消灭星星加强版(附带完整源码工程)

本文乃Siliphen原创&#xff0c;转载请注明出处 目录 概述 游戏整体流程 游戏框架设计 单一职责的类 主要流程控制类 核心玩法模块 UI&#xff1a; 游戏世界&#xff1a; 本文项目的代码组织结构 作者项目实践总结 场景只有一个入口脚本 尽量少在节点上挂载脚本 构…...

2023软件测试岗必问的100个面试题【含答案】

一、测试理论 1.什么是软件测试&#xff1f; 答&#xff1a;软件测试是通过执行预定的步骤和使用指定的数据&#xff0c;以确定软件系统在特定条件下是否满足预期的行为。 2.测试驱动开发&#xff08;TDD&#xff09;是什么&#xff1f; 答&#xff1a;测试驱动开发是一种开…...

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…...

零门槛NAS搭建:WinNAS如何让普通电脑秒变私有云?

一、核心优势&#xff1a;专为Windows用户设计的极简NAS WinNAS由深圳耘想存储科技开发&#xff0c;是一款收费低廉但功能全面的Windows NAS工具&#xff0c;主打“无学习成本部署” 。与其他NAS软件相比&#xff0c;其优势在于&#xff1a; 无需硬件改造&#xff1a;将任意W…...

使用VSCode开发Django指南

使用VSCode开发Django指南 一、概述 Django 是一个高级 Python 框架&#xff0c;专为快速、安全和可扩展的 Web 开发而设计。Django 包含对 URL 路由、页面模板和数据处理的丰富支持。 本文将创建一个简单的 Django 应用&#xff0c;其中包含三个使用通用基本模板的页面。在此…...

Day131 | 灵神 | 回溯算法 | 子集型 子集

Day131 | 灵神 | 回溯算法 | 子集型 子集 78.子集 78. 子集 - 力扣&#xff08;LeetCode&#xff09; 思路&#xff1a; 笔者写过很多次这道题了&#xff0c;不想写题解了&#xff0c;大家看灵神讲解吧 回溯算法套路①子集型回溯【基础算法精讲 14】_哔哩哔哩_bilibili 完…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

为什么需要建设工程项目管理?工程项目管理有哪些亮点功能?

在建筑行业&#xff0c;项目管理的重要性不言而喻。随着工程规模的扩大、技术复杂度的提升&#xff0c;传统的管理模式已经难以满足现代工程的需求。过去&#xff0c;许多企业依赖手工记录、口头沟通和分散的信息管理&#xff0c;导致效率低下、成本失控、风险频发。例如&#…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

css3笔记 (1) 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

华硕a豆14 Air香氛版,美学与科技的馨香融合

在快节奏的现代生活中&#xff0c;我们渴望一个能激发创想、愉悦感官的工作与生活伙伴&#xff0c;它不仅是冰冷的科技工具&#xff0c;更能触动我们内心深处的细腻情感。正是在这样的期许下&#xff0c;华硕a豆14 Air香氛版翩然而至&#xff0c;它以一种前所未有的方式&#x…...

安宝特案例丨Vuzix AR智能眼镜集成专业软件,助力卢森堡医院药房转型,赢得辉瑞创新奖

在Vuzix M400 AR智能眼镜的助力下&#xff0c;卢森堡罗伯特舒曼医院&#xff08;the Robert Schuman Hospitals, HRS&#xff09;凭借在无菌制剂生产流程中引入增强现实技术&#xff08;AR&#xff09;创新项目&#xff0c;荣获了2024年6月7日由卢森堡医院药剂师协会&#xff0…...