【TypeScript】类型断言的基本使用

在这里插入图片描述

类型断言的概念

有些时候开发者比TS本身更清楚当前的类型是什么,可以使用断言(as)让类型更加精确和具体类型断言(Type Assertion)表示可以用来手动指定一个值的类型。

类型断言语法:

值 as 类型<类型>值

如果当我们的某一个值,它的类型还没有确定的时候,从而会影响使用,某个类型身上的属性方法,那么这个时候,我们就可以,将这个参数值的类型进行类型断言的判断,为其指定一个固定的类型。


类型断言的使用场景:


一. 将一个联合类型断言为其中一个类型

之前提到过,当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型中共有的属性或方法,而有时候,我们确实需要在还不确定类型的时候就访问其中一个类型特有的属性或方法,这时候就需要为其 断言指定一个固化的类型。

let getlength = function (x: string | number): number {if ((x as string).length) {return (<string>x).length}return x.toString().length
}
console.log(getlength("123"));//3
console.log(getlength(78456416));//8

在案例中,将 x 的类型通过值 as 类型<类型>值的方式 给断言为 String ,从而就可以访问使用 string 身上的属性方法了。

值得注意

类型断言只能够 「欺骗」 TypeScript 编译器无法避免运行时的错误,反而滥用类型断言可能会导致运行时错误。


二 . 将任何一个类型断言为 any

在TypeScript 的类型系统运转良好,每个值的类型都应该是具体而精确判断的。

但是当我们引用一个在此类型上不存在的属性或方法时,就会报错

const foo: number = 1;
foo.length = 1;

在这里插入图片描述
在上面的例子中,数字类型的变量 foo 上是没有 length 属性的,故 TypeScript 给出了相应的错误提示 很显然,这种错误提示显然是非常有用的

但有的时候,我们非常确定这段代码不会出错,比如下面这个例子

window.num= 1;

上面的例子中,我们需要将 window 上添加一个属性 num,但 TypeScript 编译时会报错,提示我们 window 上不存在 num属性。

在这里插入图片描述

此时我们可以使用 as any 临时将 window 断言为 any 类型

(window as any).num= 1;
(<any>window).num = 1;

成功给 window 身上追加一个属性。
在这里插入图片描述
在 any 类型的变量上,访问任何属性都是允许的。

需要注意的是,将一个变量断言为 any 可以说是解决 TypeScript 中类型问题的最后一个手段

警告注意

这样处理的后果极有可能掩盖了真正的类型错误,所以如果不是非常确定,就不要使用 as any
总之,一方面不能滥用 as any,另一方面也不要完全否定它的作用,我们需要在类型的严格性和开发的便利性之间掌握平衡(这也是 TypeScript 的设计理念之一),才能发挥出 TypeScript 最大的价值。


三.将 any 断言为一个具体的类型:

在日常的开发中,我们不可避免的需要处理 any 类型的变量,它们可能是由于第三方库未能定义好自己的类型,也有可能是历史遗留的或其他人编写的烂代码,还可能是受到 TypeScript 类型系统的限制而无法精确定义类型的场景。


let getCacheData = (key: any, data: any): any => {return key + data
}console.log(<number>getCacheData(5, 5));  //10
console.log(getCacheData("asd", "dfgdf") as string);  //asddfgdf

上面案例中,如果函数体,是由别人写的项目代码,函数内出现了大量的 any 类型,非常友好类型的约束性,如果函数体内部过于复杂,我们就不需要太多去关注函数内部的逻辑,只需要对函数的返回值做类型断言约束,这样就方便了后续要用到该返回值数据地方,强化了类型约束。提高了代码的可维护性


本章节给大家介绍了,在TypeScript 中,当我们的数据类型不明的时候,我们又刚好需要使用,某个类型上的属性方法,这时候我们就可以通过 类型断言 给数据,手动指定一个类型,进而使用属性上的属性方法。


🚵‍♂️ 博主座右铭:向阳而生,我还在路上!
——————————————————————————————
🚴博主想说:将持续性为社区输出自己的资源,同时也见证自己的进步!
——————————————————————————————
🤼‍♂️ 如果都看到这了,博主希望留下你的足迹!【📂收藏!👍点赞!✍️评论!】
——————————————————————————————

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

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

相关文章

4.2的幂次方表示

【题目】 任何一个正整数都可以用2进制表示&#xff0c;例如&#xff1a;137的2进制表示为10001001。 将这种2进制表示写成2的次幂的和的形式&#xff0c;令次幂高的排在前面&#xff0c;可得到如下表达式&#xff1a;137 2^7 2^3 2^0 现在约定幂次用括号来表示&#xff0…

Kafka3.0.0版本——生产者如何提高吞吐量

目录 一、生产者提高吞吐量参数设置二、产者提高吞吐量代码示例 一、生产者提高吞吐量参数设置 batch.size&#xff1a;设置批次大小&#xff0c;默认16klinger.ms&#xff1a;设置等待时间&#xff0c;修改为5-100msbuffer.memory&#xff1a;设置缓冲区大小&#xff0c; 默认…

Node.js-http模块服务端请求与响应操作,请求报文与响应报文

简单案例创建HTTP服务端&#xff1a; // 导入 http 模块 const http require("http"); // 创建服务对象 const server http.createServer((request, response) > {// 设置编码格式&#xff0c;解决中文乱码问题response.setHeader("content-type", &…

升级mybatis-plus到3.5.3.1和JSQLParser 从4.3升级到4.6版本引起的插入问题解决

由于项目组件升级&#xff0c;所以需要升级mybatis-plus到3.5.3.1和JSQLParser 从4.3升级到4.6版本&#xff0c;但发现用标准的插入也会报错&#xff0c;如下&#xff1a; ### Cause: com.baomidou.mybatisplus.core.exceptions.MybatisPlusException: Failed to process, Erro…

tomcat限制IP访问

tomcat可以通过增加配置&#xff0c;来对来源ip进行限制&#xff0c;即只允许某些ip访问或禁止某些来源ip访问。 配置路径&#xff1a;server.xml 文件下 标签下。与同级 <Valve className"org.apache.catalina.valves.RemoteAddrValve" allow"192.168.x.x&…

特斯拉墨西哥工厂风波:2.5万美金的车型何时开造?

作者 | Amy 编辑 | 德新 去年10月&#xff0c;马斯克闪现墨西哥新莱昂州&#xff0c;会见了当地官员。考虑到新莱昂州是通用和现代工厂所在地&#xff0c;特斯拉第五大工厂花落墨西哥的消息不胫而走。 今年3月&#xff0c;特斯拉正式宣布&#xff0c;将在墨西哥北部新莱昂州的…

嵌入式:C高级 Day2

一、递归实现&#xff0c;输入一个数&#xff0c;输出这个数的每一位 二、递归实现&#xff0c;输入一个数字&#xff0c;输出这个数的二进制 三、写一个脚本&#xff0c;包含以下内容 1.显示/etc/group文件中第五行的内容 2.创建目录/home/ubuntu/copy 3.切换工作路径到此目录…

多雷达探测论文阅读笔记:雷达学报 2023, 多雷达协同探测技术研究进展:认知跟踪与资源调度算法

多雷达协同探测技术 原始笔记链接:https://mp.weixin.qq.com/s?__biz=Mzg4MjgxMjgyMg==&mid=2247486627&idx=1&sn=f32c31bfea98b85f2105254a4e64d210&chksm=cf51be5af826374c706f3c9dcd5392e0ed2a5fb31ab20924b7dd38e1b1ae32abe9a48afa8174#rd ↑ \uparrow …

【蓝图】p46角色上下车功能

这里写目录标题 p46角色上下车功能上车&#xff08;控制权切换&#xff09;让角色和汽车一起移动GetWorldTransform&#xff08;获取场景变换&#xff09;break&#xff08;拆分变换&#xff09;AttachActorToComponent&#xff08;附加Actor到组件&#xff09; 下车 p46角色上…

2023华数杯数学建模C题思路 - 母亲身心健康对婴儿成长的影响

# 1 赛题 C 题 母亲身心健康对婴儿成长的影响 母亲是婴儿生命中最重要的人之一&#xff0c;她不仅为婴儿提供营养物质和身体保护&#xff0c; 还为婴儿提供情感支持和安全感。母亲心理健康状态的不良状况&#xff0c;如抑郁、焦虑、 压力等&#xff0c;可能会对婴儿的认知、情…

【雕爷学编程】MicroPython动手做(28)——物联网之Yeelight 5

知识点&#xff1a;什么是掌控板&#xff1f; 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片&#xff0c;支持WiFi和蓝牙双模通信&#xff0c;可作为物联网节点&#xff0c;实现物联网应用。同时掌控板上集成了OLED…

UniPro助力金融企业数字化转型 强化项目协作与跟踪

根据一份来自Standish Group的研究报告&#xff08;"CHAOS Report"&#xff09;&#xff0c;该报告对美国各行业的项目进行了调查&#xff0c;结果显示仅有不到一半&#xff08;约44%&#xff09;的项目能够成功按时完成&#xff0c;并达到预期的业务目标。其中&…

数智保险 创新未来 | GBASE南大通用亮相中国保险科技应用高峰论坛

本届峰会以“数智保险 创新未来”为主题&#xff0c;GBASE南大通用携新一代创新数据库产品及金融信创解决方案精彩亮相&#xff0c;与国内八百多位保险公司高管和众多保险科技公司技术专家&#xff0c;就保险领域数字化的创新应用及生态建设、新一代技术突破及发展机遇、前沿科…

深入理解TCP三次握手:连接可靠性与安全风险

目录 导言TCP简介和工作原理的回顾TCP三次握手的目的和步骤TCP三次握手过程中可能出现的问题和安全风险为什么TCP三次握手是必要的&#xff1f;是否可以增加或减少三次握手的次数&#xff1f;TCP四次挥手与三次握手的异同点 导言 在网络通信中&#xff0c;TCP&#xff08;Tra…

Redis入门-1

简介 nosql的一种&#xff0c;不是替代传统的sql&#xff0c;而是对传统的sql进行补充增强。redis用于短时间的高访问&#xff0c;其数据是存储在内存上的。 应用场景&#xff1a; 缓存 任务队列 消息队列 分布式锁 Linux系统上安装Redis 运行redis,进入/usr/local/redis-…

uC-OS2 V2.93 STM32L476 移植:串口打印篇

前言 前几篇已经 通过 STM32CubeMX 搭建了 NUCLEO-L476RG 的 STM32L476RG 的 裸机工程&#xff0c;下载了 uC-OS2 V2.93 的源码&#xff0c;并把 uC-OS2 的源文件加入 Keil MDK5 工程&#xff0c;通过适配 Systick 系统定时器与 PendSV 实现任务调度&#xff0c;初步让 uC-OS2 …

在腾讯云服务器OpenCLoudOS系统中安装redis(有图详解)

创建安装目录&#xff1a; mkdir -p /app/soft/redis 2. 下载安装包 进入安装目录 cd /app/soft/redis/ 下载安装包 wget https://download.redis.io/releases/redis-7.0.1.tar.gz 解压&#xff1a; tar -zxvf redis-7.0.1.tar.gz 安装gcc yum install gcc-c 进入re…

LUN映射出错导致写操作不互斥的服务器数据恢复案例

服务器数据恢复环境&#xff1a; 某公司的光纤SAN存储系统&#xff0c;6块硬盘组建一组RAID6&#xff0c;划分若干LUN&#xff0c;MAP到不同的SOLARIS操作系统服务器上。 服务器故障&分析&#xff1a; 由于业务增长需要新增应用&#xff0c;工作人员增加了一台IBM服务器&am…

QT--day6(人脸识别、图像处理)

人脸识别&#xff1a; /***********************************************************************************头文件****************************************************************************************/#ifndef WIDGET_H #define WIDGET_H#include <QWidget>…

新手入门Jenkins自动化部署入门详细教程

1. 背景 在实际开发中&#xff0c;我们经常要一边开发一边测试&#xff0c;当然这里说的测试并不是程序员对自己代码的单元测试&#xff0c;而是同组程序员将代码提交后&#xff0c;由测试人员测试&#xff1b; 或者前后端分离后&#xff0c;经常会修改接口&#xff0c;然后重新…