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

TS中断言、转换的应用

1.TS 类型断言定义

把两种能有重叠关系的数据类型进行相互转换的一种 TS 语法,把其中的一种数据类型转换成另外一种数据类型。类型断言和类型转换产生的效果一样,但语法格式不同。

2.TS 类型断言语法格式

A 数据类型的变量 as B 数据类型 。

A 数据类型和 B 数据类型必须具有重叠关系。

3.TS 类型断言使用规则和场景
(1)如果 A,B 如果是类并且有继承关系

【 extends 关系】无论 A,B 谁是父类或子类, A 的对象变量可以断言成 B 类型,B 的对象变量可以断言成A类型 。但注意一般在绝大多数场景下都是把父类的对象变量断言成子类。

class People {public myusername!: string;public myage!: number;public address!: stringpublic phone!: stringconstructor() {}eat() {}step() {console.log("People=>step");}
}class Stu extends People {public username!: stringpublic age!: number;public address!: stringconstructor(username: string, age: number, address: string, public phone: string) {super();this.address = address;}study() {}
}let people = new People()//let result = people as Stu;// 类型断言 正确
let result = <Stu>people;// 类型转换 正确
result.study();let stu = new Stu("wangwu", 23, "北京", "123")
let result2 = stu as People;// 正确
(2)如果 A,B 如果是类,但没有继承关系

两个类中的任意一个类的所有的 public 实例属性【不包括静态属性】加上所有的 public 实例方法和另一个类的所有 public 实例属性加上所有的 public 实例方法完全相同或是另外一个类的子集,则这两个类可以相互断言,否则这两个类就不能相互断言。

// 类型断言中的不能相互重叠问题:
//   两个类之间断言的规则:
//   两个类中任意一个的属性和方法是另一个类的属性和方法完全相同或子集,则这两个类可以相互断言
//   否则这两个类就不能相互断言class People {constructor(public username: string, public age: number,public address: string) {}
}class Stu {public username!: stringpublic age!: number;public address!: stringpublic phone!:string;constructor(username: string, age: number, address: string) {this.address = address;}
}let people = new People("wangwu", 23, "beijing")
let stuedConvert = people as Stu;
let stu = new Stu("wangwu", 23, "北京")
let peopledConvert = stu as People;
(3)如果 A 是类,B 是接口,并且 A 类实现了 B 接口【implements】,则A 的对象变量可以断言成 B 接口类型,同样 B 接口类型的对象变量也可以断言成A类型 。
interface People {username: string, age: number, address: string, phone: string
}class Stu implements People {public username!: stringpublic age!: number;public address!: stringpublic phone!: stringpublic kk() {}constructor(username: string, age: number, address: string) {this.address = address;}
}let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确
let result2 = <Stu>people;// 类型转换 正确let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确
(4)如果 A 是类,B 是接口,并且 A 类没有实现了 B 接口,则断言关系和第2项的规则完全相同。
interface People {username: string, age: number, address: string, phone: string
}class Stu {public username!: stringpublic age!: number;public address!: stringpublic phone!: stringpublic kk() {}constructor(username: string, age: number, address: string) {this.address = address;}
}let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确
(5)如果 A 是类,B 是 type 定义的数据类型

type 定义的数据类型是引用数据类型,例如 Array, 对象,不能是基本数据类型,例如 string,number,boolean,并且有 A 类实现了 B type 定义的数据类型【 implements】,则 A 的对象变量可以断言成 B type 定义的对象数据类型,同样 B type 定义的对象数据类型的对象变量也可以断言成 A 类型 。

type People = {username: string, age: number, address: string, phone: string
}class Stu implements People {public username!: stringpublic age!: number;public address!: stringpublic phone!: stringconstructor(username: string, age: number, address: string) {this.address = address;}
}let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确
(6)如果 A 是类,B 是 type 定义的数据类型,并且 A 类没有实现 B type定义的数据类型,则断言关系和第2项的规则完全相同。
type People = {username: string, age: number, address: string, phone: string
}
class Stu {public username!: stringpublic age!: number;public address!: stringconstructor(username: string, age: number, address: string) {this.address = address;}
}let people: People = { username: "wangwu", age: 23, address: "11", phone: "111" }
let result = people as Stu;//正确let stu = new Stu("wangwu", 23, "北京")
stu as People;// 正确
(7)如果 A 是一个函数上参数变量的联合类型,例如 string |number,那么在函数内部可以断言成 string 或number 类型。
function selfMutiply(one: string | number) {one as number +3;
}
(8)多个类组成的联合类型断言

例如:let vechile: Car | Bus | Trunck。 vechile 可以断言成其中任意一种数据类型。 例如 vechile as Car, vechile as Bus , vechile as Trunck 。

class Vechile {static count: number = 3;public brand: string;public vechileNo: string;public days: number;public total: number = 0;public deposit: number;constructor(brand_: string, vechileNo_: string, days_: number, deposit_: number) {this.brand = brand_;this.vechileNo = vechileNo_;this.days = days_;this.deposit = deposit_;}public calculateRent() {}payDesposit() {}public safeShow() {}
}class Car extends Vechile {public type: string;constructor(brand_: string, vechileNo_: string, days_: number,deposit_: number, type_: string) {super(brand_, vechileNo_, days_, deposit_);this.type = type_;}public getPriceByType() {}public calculateRent() {}public checkIsWeigui(isOverWeight: boolean) {}
}class Bus extends Vechile {public seatNum: numberconstructor(brand_: string, vechileNo_: string, days_: number,deposit_: number, seatNum_: number) {super(brand_, vechileNo_, days_, deposit_);this.seatNum = seatNum_;}public getPriceBySeatNum() {}public checkIsOverNum(isOverWeight: boolean) {}
}class Truck extends Vechile {ton!: numberconstructor(brand_: string, type_: string,days_: number, deposit_: number, ton_: number) {super(brand_, type_, days_, deposit_);this.ton = ton_;}checkIsOverWeight(isOverWeight: boolean) {}CalRentPrice() {}public calRent() {}public calDesposit() {}
}class Customer {rentVechile(vechile:Bus | Truck | Car) {// 下面进行断言、转换//<Bus>vechile <==等同==> vechile as Bus//vechile as unknown//vechile.calculateRent()//(vechile as Bus).checkIsOverNum(false)}
}
(9)任何数据类型都可以转换成 any 或 unknown 类型**,any 或 unknown 类型也可以转换成任何其他数据类型。
function add(one: string | number, two: string | number) {return one as any + two as any
}console.log(add(3, 5))
console.log(add("3", 5))
4.类型断言存在的意义和应用场景:

场景1:顾客在执行汽车租赁项目租赁价格计算方法中调用每一个类的独有方法时使用

场景2:对象中的 Symbol 数据类型取值问题

场景3:加法计算,巧用 as any。

let symid = Symbol("objid")
let obj = { [symid]: 101, username: "wangwu", age: 23 }
let username = obj["username"]
//let objid=obj[symid]//类型“symbol”不能作为索引类型使用
// 解决:
let objid = obj[symid as any]
//let objid2 = obj[symid as unknown]//类型“unknown”不能作为索引类型使用
//let symidunknown = symid as unknown// 可以转换成unknown,正确

脚踏实地行,海阔天空飞

相关文章:

TS中断言、转换的应用

1.TS 类型断言定义 把两种能有重叠关系的数据类型进行相互转换的一种 TS 语法&#xff0c;把其中的一种数据类型转换成另外一种数据类型。类型断言和类型转换产生的效果一样&#xff0c;但语法格式不同。 2.TS 类型断言语法格式 A 数据类型的变量 as B 数据类型 。 A 数据类…...

【代码随想录算法训练营-第四天】【链表】24,19, 面试题 02.07,142

24. 两两交换链表中的节点 第一遍-递归-小看了一下题解 思路&#xff1a; 读了两遍题目才理解…相邻节点的交换&#xff0c;这个操作很容易实现&#xff0c;但需要一个tmpNode因为是链表的题目&#xff0c;没开始思考之前先加了dummyNode&#xff0c;还真管用把dummyNode作为…...

代理设计模式

1. 代理模式 1.1 代理模式的原理分析 代理设计模式&#xff08;Proxy Design Pattern&#xff09;是一种结构型设计模式&#xff0c;它为其他对象提供一个代理对象&#xff0c;以控制对这个对象的访问。代理模式可以用于实现懒加载、安全访问控制、日志记录等功能。 代理模式…...

ubuntu安装docker及docker常用命令

docker里有三个部分 daemon 镜像 和 容器 我们需要了解的概念 容器 镜像 数据卷 文章目录 docker命令docker镜像相关命令docker容器相关命令数据卷ubuntu安装docker docker命令 #启动&#xff0c;停止&#xff0c;重启docker systemctl start docker systemctl stop docker s…...

STM32-TIM定时器输出比较

目录 一、输出比较简介 二、PWM简介 三、输出比较通道&#xff08;通用&#xff09; 四、输出比较通道&#xff08;高级&#xff09; 五、输出比较模式 六、PWM基本结构 七、PWM参数计算 八、外设介绍 8.1 舵机 8.2 直流电机及驱动 九、开发步骤 十、输出比较库函数…...

《Easy3d+Qt+VTK》学习

《Easy3dQtVTK》学习-1、编译与配置 一、编译二、配置注 一、编译 1、 资源下载&#xff1a;easy3d giuhub 2、解压缩 3、用qt打开CMakeLists.txt即可 4、点击项目&#xff0c;选择debug或者release&#xff0c;图中3处可自行选择&#xff0c;因为我的qt版本是6&#xff0c…...

多平台展示预约的服装小程序效果如何

线下实体服装店非常多&#xff0c;主要以同城生意为主&#xff0c;但随着电商经济增长&#xff0c;传统线下自然流量变少&#xff0c;商家们会选择线上入驻平台开店获得更多线上用户&#xff0c;包括自建私域小程序等。 而除了直接卖货外&#xff0c;线上展示预约在服装行业也…...

Gti GUI添加标签

通过Git Gui打开项目&#xff0c;通过菜单打开分支历史&#xff0c;我这里是名为"develop"的分支 选中需要打标签的commit&#xff0c;右键-Create tag即可 但貌似无法删除标签&#xff0c;只能通过git bash&#xff0c;本地标签通过git tag -d tagname&#xff0c;…...

高云GW1NSR-4C开发板M3硬核应用

1.M3硬核IP下载&#xff1a;Embedded M3 Hard Core in GW1NS-4C - 科技 - 广东高云半导体科技股份有限公司 (gowinsemi.com.cn) 特别说明&#xff1a;IDE必须是1.9.9及以后版本&#xff0c;1.9.8会导致编译失败&#xff08;1.9.8下1.1.3版本IP核可用&#xff09; 以下根据官方…...

【RTOS学习】模拟实现任务切换 | 寄存器和栈的变化

&#x1f431;作者&#xff1a;一只大喵咪1201 &#x1f431;专栏&#xff1a;《RTOS学习》 &#x1f525;格言&#xff1a;你只管努力&#xff0c;剩下的交给时间&#xff01; 目录 &#x1f3c0;认识任务切换&#x1f3d0;切换的实质&#x1f3d0;栈中的内容&#x1f3d0;切…...

1.2 轻量级数据交互格式–JSON

对于接口来说,数据交互大部分都是使用的JSON格式,我们这里说的数据,就是我们上一章里讲解HTTP协议的时候,HTTP协议结构里的实体,也就是放在body里。body里存放需要传输的数据,数据是JSON格式,然后通过HTTP协议来传输给接口,接口再以同样的方式给我们返回。理解了这一层…...

charCodeAt() 方法

charCodeAt() 是 JavaScript 中用于获取字符串指定位置字符的 Unicode 编码的方法 语法如下&#xff1a; str.charCodeAt(index) str&#xff1a;要获取字符的字符串。index&#xff1a;要获取的字符在字符串中的索引。返回值是一个表示给定索引处字符 Unicode 编码的整数。…...

Flask中redis的配置与使用

注意点&#xff1a; 在__init__.py中需要将redis_store设置成全局变量&#xff0c;这样方便其他文件导入 一、config.py import logging import os from datetime import timedeltafrom redis import StrictRedisclass Config:# 调试信息DEBUG TrueSECRET_KEY os.urandom(3…...

生产者与消费者模型

初识linux之线程同步与生产者消费者模型_生产者线程和消费者线程-CSDN博客 Linux线程&#xff08;三&#xff09;—— 多线程&#xff08;生产者消费者模型、信号量、线程池&#xff09;-CSDN博客...

透析回溯的模板

关卡名 认识回溯思想 我会了✔️ 内容 1.复习递归和N叉树&#xff0c;理解相关代码是如何实现的 ✔️ 2.理解回溯到底怎么回事 ✔️ 3.掌握如何使用回溯来解决二叉树的路径问题 ✔️ 回溯可以视为递归的拓展&#xff0c;很多思想和解法都与递归密切相关&#xff0c;在很多…...

浅谈web性能测试

什么是性能测试&#xff1f; web性能应该注意些什么&#xff1f; 性能测试&#xff0c;简而言之就是模仿用户对一个系统进行大批量的操作&#xff0c;得出系统各项性能指标和性能瓶颈&#xff0c;并从中发现存在的问题&#xff0c;通过多方协助调优的过程。而web端的性能测试…...

Qt 容器QGroupBox带有标题的组框框架

控件简介 QGroupBox 小部件提供一个带有标题的组框框架。一般与一组或者是同类型的部件一起使用。教你会用,怎么用的强大就靠你了靓仔、靓妹。 用法示例 例 qgroupbox,组框示例(难度:简单),使用 3 个 QRadioButton 单选框按钮,与QVBoxLayout(垂直布局)来展示组框的…...

Linux系统解决“Key was rejected by service”

Linux系统下加载驱动模块出现如上错误提示的原因为&#xff1a;此驱动未经过签名。 方法一、关闭Secure Boot 如果是物理机&#xff0c;需要开机进入BIOS&#xff0c;找到“Secure Boot”的选项&#xff0c;然后关闭。 如果是虚拟机&#xff0c;可以打开虚拟设置&#xff0c…...

【C++ Primer Plus学习记录】字符函数库cctype

C从C语言继承了一个与字符相关的、非常方便的函数软件包&#xff0c;它可以简化诸如确定字符是否为大写字母、数字、标点符号等工作&#xff0c;这些函数的原型是在头文件cctype中定义的。 cctype中的字符函数 函数名称返回值isalnum()如果参数是字母或数字&#xff0c;该函数返…...

C# WebSocket简单使用

文章目录 前言Fleck调试工具初始化简单使用 前言 最近接到了一个需求&#xff0c;需要网页实现上位机的功能。那就对数据传输的实时性要求很高。那就只能用WebSocket了。这里简单说一下我的WebSocket如何搭建 Fleck C# WebSocket(Fleck) 客户端:html Winfrom Fleck Github官网…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

多云管理“拦路虎”:深入解析网络互联、身份同步与成本可视化的技术复杂度​

一、引言&#xff1a;多云环境的技术复杂性本质​​ 企业采用多云策略已从技术选型升维至生存刚需。当业务系统分散部署在多个云平台时&#xff0c;​​基础设施的技术债呈现指数级积累​​。网络连接、身份认证、成本管理这三大核心挑战相互嵌套&#xff1a;跨云网络构建数据…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者

抖音增长新引擎&#xff1a;品融电商&#xff0c;一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中&#xff0c;品牌如何破浪前行&#xff1f;自建团队成本高、效果难控&#xff1b;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

C++ 基础特性深度解析

目录 引言 一、命名空间&#xff08;namespace&#xff09; C 中的命名空间​ 与 C 语言的对比​ 二、缺省参数​ C 中的缺省参数​ 与 C 语言的对比​ 三、引用&#xff08;reference&#xff09;​ C 中的引用​ 与 C 语言的对比​ 四、inline&#xff08;内联函数…...

SpringBoot+uniapp 的 Champion 俱乐部微信小程序设计与实现,论文初版实现

摘要 本论文旨在设计并实现基于 SpringBoot 和 uniapp 的 Champion 俱乐部微信小程序&#xff0c;以满足俱乐部线上活动推广、会员管理、社交互动等需求。通过 SpringBoot 搭建后端服务&#xff0c;提供稳定高效的数据处理与业务逻辑支持&#xff1b;利用 uniapp 实现跨平台前…...

LeetCode - 199. 二叉树的右视图

题目 199. 二叉树的右视图 - 力扣&#xff08;LeetCode&#xff09; 思路 右视图是指从树的右侧看&#xff0c;对于每一层&#xff0c;只能看到该层最右边的节点。实现思路是&#xff1a; 使用深度优先搜索(DFS)按照"根-右-左"的顺序遍历树记录每个节点的深度对于…...

JS手写代码篇----使用Promise封装AJAX请求

15、使用Promise封装AJAX请求 promise就有reject和resolve了&#xff0c;就不必写成功和失败的回调函数了 const BASEURL ./手写ajax/test.jsonfunction promiseAjax() {return new Promise((resolve, reject) > {const xhr new XMLHttpRequest();xhr.open("get&quo…...

【Nginx】使用 Nginx+Lua 实现基于 IP 的访问频率限制

使用 NginxLua 实现基于 IP 的访问频率限制 在高并发场景下&#xff0c;限制某个 IP 的访问频率是非常重要的&#xff0c;可以有效防止恶意攻击或错误配置导致的服务宕机。以下是一个详细的实现方案&#xff0c;使用 Nginx 和 Lua 脚本结合 Redis 来实现基于 IP 的访问频率限制…...

脑机新手指南(七):OpenBCI_GUI:从环境搭建到数据可视化(上)

一、OpenBCI_GUI 项目概述 &#xff08;一&#xff09;项目背景与目标 OpenBCI 是一个开源的脑电信号采集硬件平台&#xff0c;其配套的 OpenBCI_GUI 则是专为该硬件设计的图形化界面工具。对于研究人员、开发者和学生而言&#xff0c;首次接触 OpenBCI 设备时&#xff0c;往…...