学习ts(四)联合类型、交叉类型、类型断言

news2024/9/23 19:17:58

联合类型

使用联合类型定义属性和方法,只要符合其中一种即可

let myPhone: string | number = '010-7788'
// let myPhone1: string | number = true   因为没有包含boolean值 会报错

const fn = (something: number | boolean): boolean => {
    return !!something
}

console.log(fn(1))
console.log(fn(true))

!!一般用来将后面的表达式强制转换为布尔类型的数据(boolean),也就是只能是true或者false
隐式转换:a = “1234” - 0 //转换为数字 b = 1234 + “” //转换为字符串

交叉类型

需要符合两种类型,相当于extends关键字

interface ModalA {
    name: string,
    age: number
}

interface ModalB {
    sex: number
}


const person: ModalA & ModalB = {
    name: '123',
    age: 12,
    sex: 1
}
const printData = (person: ModalA & ModalB): void => {
    console.log(person.name)
    console.log(person.age)
    console.log(person.sex)
}

printData(person)

类型断言

语法:值 as 类型 :value as string 或 <类型>值: <string>value

在这里插入图片描述
在这种情况下,由于type可能是a也可能是b,不一定存在sex属性,所以可以加一个类型判断,是b的时候返回sex属性

interface ModalA {
    name: string,
    age: number
}

interface ModalB {
    sex: number
}

const person = (type: ModalA | ModalB): number => {
    return (type as ModalB).sex
}

类型断言只能够「欺骗」TypeScript 编译器,无法避免运行时的错误
类型断言是不具有影响力的。可以通过编译,但是并不会影响结果,因为编译过程中会删除类型断言

function toBoolean(something: any): boolean {
    return something as boolean;
}
 
toBoolean(1);
// 返回值为 1

as const

对于字面量的断言,与与const直接定义常量是有区别的
如果是普通类型跟const声明是一样的
在这里插入图片描述
如果是引用类型,const定义的是可以修改其中的值的,但是as const 是不可修改的
在这里插入图片描述

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

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

相关文章

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理(包括词的属性处理)的简单整理

Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 目录 Android Studio 之 Android 中使用 HanLP 进行句子段落的分词处理&#xff08;包括词的属性处理&#xff09;的简单整理 一、简单介绍 二、实现原理…

Python入门【装饰器​编辑、多个装饰器 、带参数的装饰器、生成器、 生成器定义、 迭代器】(二十八)

&#x1f44f;作者简介&#xff1a;大家好&#xff0c;我是爱敲代码的小王&#xff0c;CSDN博客博主,Python小白 &#x1f4d5;系列专栏&#xff1a;python入门到实战、Python爬虫开发、Python办公自动化、Python数据分析、Python前后端开发 &#x1f4e7;如果文章知识点有错误…

教你10分钟快速上手Docker基础操作

一、docker平台组成 docker最核心的组件是&#xff1a;镜像、容器、仓库 二、常用基础命令 1、镜像操作 &#xff08;1&#xff09;拉取镜像 查找指定镜像&#xff1a;docker search 镜像名字 [rootclient ~]# docker search centos NAME …

VirtualBox安装CentOS8.5

0 环境 win10 virtualbox版本 版本 7.0.10 r158379 (Qt5.15.2) 1.镜像下载 阿里镜像站 https://developer.aliyun.com/mirror/ 1.1 找到安装包下载地址 1.2 找到8.5版本 1.3 iso 再然后 1.4 选择安装包 我这里选的是最小安装包&#xff0c;centOS8.5最小安装版本&#…

【边缘设备】yolov5训练与rknn模型导出并在RK3588部署~4.导出模型(亲测有效)

保姆级教程&#xff0c;看这一篇就够用了。 在翻阅了网络上很多资料后&#xff0c;发现很多版本的信息比匹配。 花了一周的时间配置环境&#xff0c;以及环境验证&#xff0c;然后写了这篇长文。 有过程&#xff0c;有代码&#xff0c;有经验&#xff0c;欢迎大家批评指正。 一…

linux部署kafka3.5.1(单机)

一、下载jdk17 kafka3.x版本需要jdk11以上版本才能更好的兼容&#xff0c;jdk11、jdk17都是LTS长期维护版本&#xff0c;而且jdk17支持springboot3.x,所以我选择了openjdk17。 下载地址: Archived OpenJDK GA Releaseshttps://jdk.java.net/archive/ 二、上传jdk安装包解压 …

Linux 终端会话中,启动任务并放到后台运行

一、需求 linux要执行一个脚本&#xff0c;耗时很长&#xff0c;想要脚本在后台运行&#xff0c;用户注销或终端软件关闭时也可以继续运行。 二、实现 1、nohup命令 脚本在后台运行 nohup 是在 Linux 和类 Unix 系统中使用的一个命令&#xff0c;用于在后台运行程序&#x…

【ES6】—解构赋值

一、定义 解构赋值&#xff1a;解构赋值就是一种模式的匹配&#xff0c;只要等号两边的模式完全相同的&#xff0c;那么左边的变量就会被赋值对应右边的值 二、数组的解构赋值 PS&#xff1a;数组解构赋值时&#xff0c;是通过索引的唯一性赋值的 1. 一维数组解构赋值 (1)…

亿赛通电子文档安全管理系统任意文件上传漏洞(2023-HW)

亿赛通电子文档安全管理系统任意文件上传漏洞 一、 产品简介二、 漏洞概述三、 影响范围四、 复现环境五、 漏洞复现小龙POC检测 免责声明&#xff1a;请勿利用文章内的相关技术从事非法测试&#xff0c;由于传播、利用此文所提供的信息或者工具而造成的任何直接或者间接的后果…

ADIS16470和ADIS16500从到手到读出完整数据,附例程

由于保密原因&#xff0c;不能上传我这边的代码&#xff0c;我所用的开发环境是IAR&#xff0c; 下边转载别的博主的文章&#xff0c;他用的是MDK 下文的博主给了你一个很好的思路&#xff0c;特此提出表扬 最下方是我做的一些手册批注&#xff0c;方便大家了解这个东西 原文链…

Github下载任意版本的VsCode

下载历史版本VsCode(zip) 下载链接由三部分组成&#xff1a; 固定部分commit idVSCode-win32-x64-版本号.zip 固定部分&#xff1a; https://vscode.cdn.azure.cn/stable/ Commit id&#xff1a; 打开 vscode的GitHub&#xff1a;[https://github.com/microsoft/vscode/r…

Code interpreter生成无聊的APP:病理图像切割和提取

一、写在前面 机器学习100步不够分配了&#xff0c;所以开个新专栏&#xff0c;就叫做《Code interpreter生成无聊的APP》&#xff0c;旨在探索GPT-4官方插件Code interpreter的使用心路历程。 主要灵感来源&#xff1a;听户主说&#xff0c;她们在做病理组学图像标注和分割的…

作品集封面这样设计,提升个人竞争力!

随着毕业季、求职季陆陆续续的到来&#xff0c;许多毕业生和求职者都将踏上找工作的道路。作品集作为敲门砖&#xff0c;对设计师来说非常重要。而一套完整的作品集自然少不了一张精致吸睛的个人作品集封面&#xff0c;作品集封面的质量直接影响了整套作品的效果。那么&#xf…

Spring Clould 注册中心 - Eureka,Nacos

视频地址&#xff1a;微服务&#xff08;SpringCloudRabbitMQDockerRedis搜索分布式&#xff09; Eureka 微服务技术栈导学&#xff08;P1、P2&#xff09; 微服务涉及的的知识 认识微服务-服务架构演变&#xff08;P3、P4&#xff09; 总结&#xff1a; 认识微服务-微服务技…

原生实现koa框架连接mongoose数据库

1.首先新建一个初始化文件 npm init -y2.下载koa框架所依赖的插件 npm i koa koa-bodyparser koa-router mongoose3.新建一个server.js文件作为我们的服务器 const Koa require(koa) const Router require(koa-router) //可以接受post请求 const bodyParser require(koa-b…

【Spring Cloud 八】Spring Cloud Gateway网关

gateway网关 系列博客背景一、什么是Spring Cloud Gateway二、为什么要使用Spring Cloud Gateway三、 Spring Cloud Gateway 三大核心概念4.1 Route&#xff08;路由&#xff09;4.2 Predicate&#xff08;断言&#xff09;4.3 Filter&#xff08;过滤&#xff09; 五、Spring …

rabbitMQ服务自动停止(已解决

1、 在rabbitmq的sbin目录下操作 rabbitmq-plugins enable rabbitmq_management 2、 自己去rabbitmq_server-3.7.5文件夹下创建一个data&#xff0c;再执行这个命令&#xff08;用自己的目录哈 set RABBITMQ_BASED:\RabbitTools\RabbitMQ\rabbitmq_server-3.7.5\data 然后去配…

PHP手术麻醉系统源码,自动生成麻醉和护理医疗文书

一套手术麻醉系统源码&#xff0c;可二次开发 手术室麻醉临床信息系统&#xff08;AIMS&#xff09;是应用于医院手术室、麻醉科室的计算机软件系统。该系统针对整个围术期&#xff0c;对病人进行全程跟踪与信息管理&#xff0c;自动集成病人HIS、LIS、RIS、PACS信息&#xff0…

实现chatGPT 聊天样式

效果图 代码&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Chat Example</title&g…

axios使用axiosSource.cancel取消请求后怎么恢复请求,axios取消请求和恢复请求实现

在前端做大文件分片上传&#xff0c;或者其它中断请求时&#xff0c;需要暂停或重新请求&#xff0c;比如这里大文件上传时&#xff0c;可能会需要暂停、继续上传&#xff0c;如下GIF演示&#xff1a; 这里不详细说文件上传的处理和切片细节&#xff0c;后续有时间在出一篇&a…