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.hqwc.cn/news/13279.html

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

相关文章

2.3 Web应用 -- 2. HTTP 连接

2.3 Web应用 -- 2. HTTP 连接 HTTP连接的两种类型非持久性连接响应时间分析与建模持久性HTTP HTTP连接的两种类型 非持久性连接(Nonpersistent HTTP) 每个TCP连接最多允许传输一个对象HTTP 1.0版本使用非持久性连接 持久性连接(Persistent HTTP) 每个TCP连接允许传输多个对象H…

Dubbo hystrix 熔断降级 详细示例 多服务 公共api

目录 介绍 demo-api pom 目录 代码api provider 服务提供者 目录 pom 服务实现代码 启动代码 配置 日志 consumer 消费者 目录 pom 调用service接口 调用serviceImpl类 ctr 配置 页面调用熔断效果 相关文章 介绍 因为网上和官网拷贝的文档发现有很多版本…

PyQt如何查找帮助信息(不会写组件的代码,快看过来!)

1.可以在PyQt6官网中查找信息kReference Guide — PyQt Documentation v6.5.1 看不懂没有关系啦&#xff0c;可以使用网页翻译哒~ 找到或者直接搜索QLabel&#xff0c;寻找对应函数即可 2. https://zetcode.com/pyqt6/ 3.Qt Creator中寻找 例如&#xff0c;输入setText 就可以…

el-table 添加合计,合计某一列

效果图&#xff1a; 1. 使用elementui 官网上的方法 如果是只要是数值&#xff0c;就要合并&#xff0c;就只设置show-summary 即可。 2. html&#xff1a; <!--cell-style 改变某一列行的背景色 --><!-- tree-props 配置树形子表row-click: 单击事件highlight-cu…

SpringBoot2+Vue2实战(十二)springboot一对一,一对多查询

新建数据库表 Course Data TableName("t_course") public class Course implements Serializable {private static final long serialVersionUID 1L;/*** id*/TableId(value "id", type IdType.AUTO)private Integer id;/*** 课程名称*/private String…

开源数字名片生成器EnBizCard

什么是 EnBizCard &#xff1f; EnBizCard 可帮助您创建美观、响应灵敏的基于 HTML 的数字名片&#xff0c;并将其托管在您的网站上。 无需注册100% 免费和开源没有用户跟踪和数据收集离线工作 如果不想自己搭建&#xff0c;可以去试用官方的在线体验站点&#xff0c;地址&…

排序算法解析

常见的排序算法包括以下几种&#xff1a; 冒泡排序&#xff08;Bubble Sort&#xff09;&#xff1a;重复比较相邻的两个元素&#xff0c;将较大的元素逐渐向后移动&#xff0c;直到整个序列有序。 选择排序&#xff08;Selection Sort&#xff09;&#xff1a;从未排序部分选…

java面试题(24)

1、重写equals&#xff08;&#xff09;方法的原则 1、对称性&#xff1a; 如果x.equals&#xff08;y&#xff09;返回是“true”&#xff0c;那么y.equals&#xff08;x&#xff09;也应该返回是 “true”。 2、自反性&#xff1a; x.equals&#xff08;x&#xff09;必须…

mysql 数据库备份和还原

数据库备份 第一步&#xff1a;先在环境变量Path里面加上mysql bin目录的路径 第二部&#xff1a;执行对应的命令 备份数据库中的表&#xff1a; 命令&#xff1a; mysqldump -u root -p fenku_lianxi customer > d:\temp.sql root是 账号 username fenku_lianxi是数据…

transforms机制与数据标准化

文章和代码已经归档至【Github仓库&#xff1a;https://github.com/timerring/dive-into-AI 】或者公众号【AIShareLab】回复 pytorch教程 也可获取。 文章目录 图像预处理 transformstransforms运行机制数据标准化transforms.normalizetransforms.Normalize 图像预处理 transf…

javassist 02 implement interface

创建 interface package com.wsd;public interface AccountDao {int delete(); }利用 javassist 生产一个 类A, Class A implements AccountDao package com.wsd;import javassist.ClassPool; import javassist.CtClass; import javassist.CtMethod; import javassist.Modifi…

4. PS切图

4.1常见的图片格式 jpg图像格式: JPEG ( .JPG )对色彩的信息保留较好,高清,颜色较多,我们产品类的图片经常用jpg格式的gif图像格式 : GIF格式最多只能储存256色,所以通常用来显示简单图形及字体,但是可以保存透明背景和动画效果,实际经常用于一些图片小动画效果png图像格式&am…