TypeScript 中【类型断言】得使用方法

news2024/11/16 19:31:22

在这里插入图片描述

类型断言的概念

有些时候开发者比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/728693.html

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

相关文章

vue3 实现多层级列表

文章目录 需求背景解决效果index.vue视频效果 需求背景 需要在统一个列表下&#xff0c;实现商品和规格得管理和联动 解决效果 index.vue <!--/*** author: liuk* date: 2023/7/7* describe: 商品列表 */--> <template><div class"container">&…

textarea自适应高度二——(设置隐藏div获取高度和仿element-ui组件)

文章目录 前言一、通过隐藏div的方式来设置文本域自适应高度1. 新增一个文本域样式一个的dom&#xff0c;但是里面的textarea改为div2. 隐藏div的class3.设置文本域高度的方法 二、仿element-ui组件设置textarea自适应高度1.element-ui中自适应效果2. 看源码&#xff0c;盘逻辑…

病毒专题丨 plugx病毒

一、病毒简述 之前分析了一下&#xff0c;分析的较为简单&#xff0c;这次又详细分析了一下。 文件名称 00fbfaf36114d3ff9e2c43885341f1c02fade82b49d1cf451bc756d992c84b06 文件格式 RAR 文件类型(Magic) RAR archive data, v5 文件大小 157.74KB SHA256 00fbfaf36114d3ff9e…

【编程中的数学】:冰雹猜想

今天和大家分享一个令人着迷的数学谜题——冰雹猜想。这个谜题曾在1976年引起轰动&#xff0c;当时《华盛顿邮报》以头版头条刊登了一篇关于它的报道。让我们一起探索这个数学游戏的奥秘。 70年代中期&#xff0c;美国一所名牌大学的校园内兴起了一种数学游戏&#xff0c;这个游…

微信小程序使用vant时间选择器二次封装成自定义区间时间选择

目录 1.引入vant组件库 2.wxml页面 3.js页面 1.引入vant组件库 1.安装vant # 通过 npm 安装 npm i vant/weapp -S --production # 通过 yarn 安装 yarn add vant/weapp --production # 安装 0.x 版本 npm i vant-weapp -S --production 2.将 app.json 中的 "style&quo…

2-需求

目录 1.需求的定义 1.1.用户需求 1.2.软件需求 PS&#xff1a;软件需求规格说明书 2.为什么有需求&#xff1f; PS&#xff1a;为什么需求对软件测试人员如此重要&#xff1f; 3.测试人员眼里的需求 4.如何深入了解需求&#xff1f; 4.1.参加需求评审会议 4.2.查阅文…

数据结构初阶--二叉树OJ1

目录 二叉树的最大深度思路分析代码实现 相同的树思路分析代码实现 单值二叉树思路分析代码实现 二叉树的前序遍历思路分析代码实现 翻转二叉树思路分析代码实现 对称二叉树思路分析代码实现 另一棵树的子树思路分析代码实现 二叉树的最大深度 先来看题目描述 思路分析 题目…

QT学习—串口LED小项目

前言——博主刚开始接触QT&#xff0c;本文参考博主嵌入式大杂烩的一篇博文易懂 | 手把手教你编写你的第一个上位机&#xff0c;初步学习一下QT开发。 文章目录 一、QT安装二、新建工程三、创建上位机界面3.1 修改控件名3.2 添加槽函数 四、上位机程序打包五、上位机测试六、总…

不要用 in + 子查询

前两天我的 VIP 用户向我抛出了一个 SQL 问题&#xff0c;他的 MySQL 是 8.x版本&#xff1a; 大概意思如下 sql &#xff1a; select * from A where id in (select max(id) as id from A where task_id in(1,2,3) group by task_id );这个 A 表中是有 task_id 这个索引的。 …

【转换】编码转换工具笔记

应用场景 应用场景是程序整合第三方库多平台运行&#xff0c;第三方库window平台编译&#xff0c;代码移植到linux出现bom问题 思考解决 windows使用utf-8编码&#xff0c;linux使用utf-8无bom编码 工具主要针对utf-8编码文件&#xff0c;能够批量添加删除BOM&#xff0c;无…

SpringBoot获取项目日志

目的 对于布署在远端的服务&#xff0c;我们想快速的获取到日志。对于使用了日志服务&#xff0c;也可能因为上报间隔太长&#xff0c;日志不够实时。 所以想通过一些方式&#xff0c;可以不用进入到容器内也可以简单快速获取到日志&#xff0c;而且是实时的日志。目标就是获…

c语言进阶-动态内存管理

重点学习内容 动态内存管理四大函数 Malloc 内存申请函数 返回值是无类型的指针&#xff0c;指向分配的内存的首地址。申请失败会返回空指针。 malloc返回值是void*类型&#xff0c;使用时需要强制转换成所需类型。 malloc和free匹配使用&#xff0c;但是如果不free释放内存&…

解析3D视觉系统在引导金属件上下料中的应用

原创 | 文 BFT机器人 引言 Introduction 机器视觉技术作为一种高科技的智能化技术&#xff0c;正在工业生产领域发挥着越来越重要的作用。它利用计算机视觉技术&#xff0c;通过获取、处理和分析图像&#xff0c;实现对产品和工艺过程的监测、检测和控制。 随着人工智能技术的…

[SUCTF2019]hardcpp

前言 又遇到ollvm了 解混淆 可以直接用angr运行脚本去除除控制流平坦化&#xff0c;最好在ancoda等管理环境里面安装angr不然问题很多 https://github.com/Pure-T/deflat 去除前 去除后&#xff0c;它将多余的直接nop了 分析 主要加密区域位于匿名函数这一块&#xff0c…

前端学习——Web API(Day1)

Web API基本认知 Web API 基本认知 作用和分类 DOM DOM树 DOM对象 获取DOM对象 根据CSS选择器来获取DOM元素 <!DOCTYPE html> <html lang"zh-CN"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" …

【教学类-36-08】转学“纪念册“留念(生肖用midjounery-niji)

作品样式 背景需求&#xff1a; 即将离开班级&#xff0c;我想收集一份28个孩子的绘画册做——留念转学纪念册. 材料准备&#xff1a; 幼儿照片 ——3月初到中6班拍摄的幼儿手持学号名字纸的照片&#xff08;为了背诵幼儿信息而拍摄的照片&#xff0c;统一竖版&#xff09; 生…

jmeter 连接数据库常见报错

1. 不允许主机连接到MySQL 报错信息&#xff1a; Response message:java.sql.SQLException: Cannot create PoolableConnectionFactory (null, message from server: "Host 192.168.1.6 is not allowed to connect to this MySQL server") 说明&#xff1a;本机的地…

代码随想录day10

232. 用栈实现队列 思路&#xff1a;用两个list去模拟栈的操作&#xff0c;一个入栈list&#xff0c;一个出栈list. 并且了解栈的操作&#xff0c;pop,peek,push. 代码&#xff1a; def __init__(self):self.stack1 [] #入栈self.stack2[] #出栈def push(self, x: int) ->…

【Linux】常用网络命令:ping\netstat\mount\ifconfig

ping命令用于检测主机&#xff0c;执行ping命令指令会使用ICMP传输协议&#xff0c;发出请求回应的信息&#xff0c;若远程主机的网络功能没有问题&#xff0c;就会回应该信息。   netstat命令用于显示网络状态&#xff0c;利用netstat 指令可让你得知linux系统的网络情况。…

图像 跟踪 - MOTR: End-to-End Multiple-Object Tracking with Transformer (ECCV 2022)

MOTR: End-to-End Multiple-Object Tracking with Transformer - 使用Transformer进行端到端多目标跟踪&#xff08;ECCV 2022&#xff09; 摘要1. 引言2. 相关工作3. 方法3.1 目标检测中的查询3.2 检测查询和跟踪查询3.3 Tracklet-Aware标签分配3.4 MOTR架构3.5 查询交互模块3…