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

news2024/12/27 12:05:56

在这里插入图片描述

类型断言的概念

有些时候开发者比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.coloradmin.cn/o/820947.html

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

相关文章

Character.AI搭建了用户创建AI角色并与之聊天的平台及社区

character Character.AI 公司是一家致力于通用人工智能&#xff08;AGI&#xff09;的全栈公司&#xff0c;于2021年10月创立&#xff0c;创始团队来自Google Brain和Meta AI&#xff0c;是深度学习、大型语言模型和对话领域的专家。Character.AI搭建了用户创建AI角色并与之聊…

Patchwork 黑客组织瞄准我国大学和研究机构

据知道创宇404高级威胁情报团队近期发现&#xff0c;名为“Patchwork”的黑客组织正以中国的大学和研究机构为目标进行活动&#xff0c;部署名为EyeShell的后门。 Patchwork也被称为“Operation Hangover”和“Zinc Emerson”&#xff0c;被怀疑是来自印度的APT组织。该组织发起…

d3dcompiler_47.dll缺失如何修复,教快速修复d3dcompiler_47.dll文件

在运行某些图形密集型应用程序或游戏时&#xff0c;你可能会遇到一条关于缺少d3dcompiler_47.dll文件的错误信息。这是一个常见的问题&#xff0c;今天我们主要就是来给大家讲解一下这方面的知识的&#xff0c;教大家怎么解决缺失d3dcompiler_47.dll的情况。 一. d3dcompiler_…

前端(十一)——Vue vs. React:两大前端框架的深度对比与分析

&#x1f60a;博主&#xff1a;小猫娃来啦 &#x1f60a;文章核心&#xff1a;Vue vs. React&#xff1a;两大前端框架的深度对比与分析 文章目录 前言概述原理与设计思想算法生态系统与社区支持API与语法性能与优化开发体验与工程化对比总结结语 前言 在当今快速发展的前端领…

智能提词器有哪些?了解一下这款提词工具

智能提词器有哪些&#xff1f;使用智能提词器可以帮助你更好地准备和交付演讲、报告或其他提词场合。它可以提高你的效率&#xff0c;节省你的时间&#xff0c;并让你更加自信地与听众沟通。另外&#xff0c;智能提词器还可以提供一些有用的功能&#xff0c;如语音识别、智能建…

Jmeter用于接口测试中,关联如何实现

Jmeter用于接口测试时&#xff0c;后一个接口经常需要用到前一次接口返回的结果&#xff0c;应该如何获取前一次请求的结果值&#xff0c;应用于后一个接口呢&#xff0c;拿一个登录的例子来说明如何获取。 1、打开jmeter, 使用的3.3的版本&#xff0c;新建一个测试计划&#x…

C++和Lua交互总结

C和Lua交互总结 Chapter1. C和Lua交互总结一、Lua与C的交互机制——Lua堆栈二、堆栈的操作三、C 调用 Lua1&#xff09;C获取Lua值2&#xff09;C调用Lua函数示例&#xff1a; 四、Lua 调用 C包装C函数 最后总结一下 Chapter1. C和Lua交互总结 原文链接&#xff1a;https://bl…

无涯教程-Lua - 条件判断

if结构要求程序员确定一个或多个要由程序判断或测试的条件&#xff0c;以及要确定的条件为真的情况下要执行的一条或多条语句&#xff0c;如果条件为真&#xff0c;则执行指定语句&#xff0c;如果条件为假&#xff0c;则执行其他语句。 Lua编程语言假定布尔值 true 和 non-nil…

PHP高级检索功能的实现以及动态拼接sql

我们学习了解了这么多关于PHP的知识&#xff0c;不知道你们对PHP高级检索功能的实现以及动态拼接sql是否已经完全掌握了呢&#xff0c;如果没有&#xff0c;那就跟随本篇文章一起继续学习吧! PHP高级检索功能的实现以及动态拼接sql。完成的功能有&#xff1a;可以单独根据一个…

Python常用命令

1.python常用函数 type() 函数&#xff1a;查询对象的类型 input() 函数在&#xff1a;函数接受一个标准输入数据&#xff0c;返回为 string 类型 range() 函数&#xff1a;用于构造一个从[start, stop) &#xff08;不包含stop&#xff09;之间的连续的不可变的整数序列对象…

SpringBoot整合knife4j(快速入门超详细版)

前言 查看此文章前强烈建议先看这篇文章&#xff1a;Java江湖路 | 专栏目录 该文章纪录的是SpringBoot快速集成Knife4j&#xff0c;每一步都有记录&#xff0c;争取每一位看该文章的小伙伴都能操作成功。达到自己想要的效果~ 文章目录 前言1、什么是Knife4j2、SpringBoor整合K…

实现邮箱管理之gmail邮箱、office365(Azure)邮箱之披荆斩棘问题一览

要进行Office365邮箱的授权对接&#xff0c;你需要先申请一个应用&#xff0c;并获取授权访问令牌。 以下是一个简单的步骤&#xff1a; 登录 Azure 门户&#xff1a;https://portal.azure.com/创建一个新的应用程序&#xff0c;或者使用现有的应用程序。要创建新的应用程序&…

在人间烟火里,卡萨帝开启品牌新征程

大暑刚过天正热&#xff0c;尤其是在今年厄尔尼诺现象席卷太平洋的背景下&#xff0c;人们对空调的需求持续“升温”。CCTV2财经频道《正点财经》在专题报道中提到&#xff0c;6月国内空调产销两旺&#xff0c;同比增长均在35%以上。 炙热的天气下&#xff0c;南方居民有更加难…

PySpark 数据操作

数据输入 RDD对象 如图可见&#xff0c;PySpark支持多种数据的输入&#xff0c;在输入完成后&#xff0c;都会得到一个&#xff1a;RDD类的对象 RDD全称为&#xff1a;弹性分布式数据集&#xff08;Resilient Distributed Datasets&#xff09; PySpark针对数据的处理&…

【SAP MII学习】Day01--Overview, Security Services, and Workbench

1. Module 1: Overview 1.1 问题存在的原因 上图展示的是在工厂中IT的架构图&#xff0c;主要分为一下的三个层次&#xff1a; Shop Floor Automation and Control Systems (SFAC):collect data from the PLCs and sensors that are connected to the machinery on the facto…

vue2 ant datepicker 日期选择框 点击此刻时间多8小时不正确解决方案

点击“此刻”后&#xff0c;可以看到在DatePicker上时间是正确的 但是打印出来的dateString时间却多了8小时 原因&#xff1a; 因为点击 此刻 那个按钮时&#xff0c;moment 对象会经过 getTodayTime 设置了 utcOffset utcOffset 会把 moment 对象的 _isUTC 设为 true 并设置 _…

北漂Java程序员入职五个月的收获总结

&#x1f468;‍&#x1f4bb;博主主页&#xff1a;小尘要自信 &#x1f468;‍&#x1f4bb;本文专栏&#xff1a;Java程序员的成长 &#x1f468;‍&#x1f4bb;上一篇文章&#xff1a;告别过去&#xff0c;拥抱未来&#xff1a;一个Java开发者的成长之路 &#x1f468;‍&a…

火热报名中 | 赛宁独家技术支持第七届“蓝帽杯”网络安全技能大赛

由公安部网络安全保卫局、教育部教育管理信息中心、中国教育协会指导&#xff0c;中国人民公安大学主办&#xff0c;奇安信科技集团股份有限公司协办&#xff0c;南京赛宁信息技术有限公司提供技术支持的2023第七届“蓝帽杯”全国大学生网络安全技能大赛于近日正式开启报名。 …

桥接模式(Brige)

桥接模式是一种结构型设计模式&#xff0c; 又称为柄体(Handle and Body)模式或接口(Interface)模式。桥接模式&#xff0c;可将将抽象部分与它的实现部分分离&#xff0c;使它们都可以独立地变化。如将一个大类或一系列紧密相关的类拆分为抽象和实现两个独立的层次结构&#x…

蓝桥云课ROS机器人旧版实验报告-02架构及概念

项目名称 实验二 ROS[Kinetic/Melodic/Noetic]架构及概念 成绩 内容&#xff1a;机器人操作系统文件系统级、计算图级、社区级、创建功能包并实现功能等 实验记录&#xff08;70分&#xff09; 安装一个可用的 build-from-source 包&#xff1a; 在克隆之前&#xff…