TypeScript技能总结(三)
typescript是js的超集,目前很多前端框架都开始使用它来作为项目的维护管理的工具,还在不断地更新,添加新功能中,我们学习它,才能更好的在的项目中运用它,发挥它的最大功效
//泛型 => 参数和返回值类型相同
//泛型的声明方式:
//语法:在函数名称后面添加<>,里面添加类型变量,比如下面T
//类型变量T,是一种特殊类型的变量,它处理类型而不是值
//该类型变量相当于一个类型容器,能够捕获用户提供的类型(具体是什么类型,由用户调用该函数时指定)
//因为T是类型,因此可以将其作为函数参数和返回值的类型,表示参数和返回值具有相同的类型
//变量类型type,可以是任意合法的变量名称
function id<T>(name: T): T {return name
}let num = id<number>(10)
let str = id<string>('a')
//调用的时候可以省略类型<>
let num1 = id(200)
//泛型约束
//number上就没有length属性
//此时就需要为泛型添加约束来收缩类型(缩窄类型取值范围)
//1.指定更加具体的类型
// function getId<T>(value: T): T {//之类会报错
// console.log(value.length)
// return value
// }// getId('zzzzzzzzz')
// getId(333333)function getId<T>(value:T[]): T[] {console.log(value.length)return value
}
//2.添加约束,是只最类型变量T进行约束
interface ILength {length:number
}
//该约束表示,传入的类型必须有length属性
function getIds<T extends ILength>(value:T):T {console.log(value.length)return value
}getIds<string>('11111111111111')
getIds([1,2,3,4,54])//错误演示
getIds(10)
//类型变量可以有多个,并且类型变量之间还可以相互约束
//keyof后面接收对象类型,生成键名,不是接收对象值
function getProps<T, K extends keyof T>(obj: T, key: K) {return obj[key]
}let obj = {name: 'gaofeng',age:20
}getProps(obj, 'name')
getProps(obj, 'age')
getProps(18,'toFixed')//错误演示
getProps(obj, 'sex')
type c = keyof obj
//泛型接口
interface IdFunc<T>{ID: (value: T) => Tids: () => T[]
}let obj: IdFunc<number> = {ID(value) {return value},ids() {return []}
}obj.ID(1111)
```js//泛型数组
```js
const arr = ['1', '2']
arr.forEach
//泛型类
class Foo<T>{defaultValue: Tadd: (x: T, y: T) => T constructor(value: T) {this.defaultValue = value}
}
// const myNums = new Foo<number>(200)
const myNums = new Foo(200)myNums.defaultValue = 40
myNums.add(10,20)
//泛型工具类
//Partial 将所有属性设置为可选,构建出一个新的类型
//Readonly 将所有的属性设置为只读,构建出一个新的类型
//Pick 从Type中选择一组属性来构造新的类型
//Record构造一个对象类型,属性键为对象类型keyskeys,属性类型为Type
interface Props {id: string,children:number[]
}//错误演示let obj: Props = {id: '11111'//此处没加chichildren属性会报错
}type PartialProps = Partial< Props >//这里就不会报错
let obj2: PartialProps = {id:'222222222'
}type ReadonlyProps = Readonly<Props>let obj3: ReadonlyProps = {id: 'xxxxxxx',children:[22222]
}
//这里就会报错,不能修改
obj3.id = '44444444444'interface PickType {id: stringtitle: stringchildren:number[]
}type PickProps = Pick<PickType, 'id' | 'title'>let obj4: PickProps = {id: '1111111',title: 'hahahaha',
}type RecordObj = Record<'a' | 'b' | 'c', string[]>let obj6: RecordObj = {a: ['a'],b: ['c'],c: ['jjjj']
}
相关文章:
TypeScript技能总结(三)
typescript是js的超集,目前很多前端框架都开始使用它来作为项目的维护管理的工具,还在不断地更新,添加新功能中,我们学习它,才能更好的在的项目中运用它,发挥它的最大功效 //泛型 > 参数和返回值类型相…...
python绿色版运行程序,python 绿色版免安装
大家好,小编来为大家解答以下问题,python绿色版运行程序,python 绿色版免安装,今天让我们一起来看看吧! 软件简介 Python3.7.0 是一种被广大从业者广泛使用的通用型设计语言。该软件提供了丰富全面的模块,并…...
Python 向Excel写数据
1.项目终端导入 xlwt 库 pip install xlwt2.导入依赖包 import xlwt3.创建Excel表格类型文件 调用xlwt模块中的Workbook方法来创建一个excel表格类型文件,其中的第一个参数是设置数据的编码格式,这里是’utf-8’的形式,style_compression设…...
MySQL(1)
MySQL创建数据库和创建数据表 创建数据库 1. 连接 MySQL mysql -u root -p 2. 查看当前的数据库 show databases; 3. 创建数据库 create database 数据库名; 创建数据库 4. 创建数据库时设置字符编码 create database 数据库名 character set utf8; 5. 查看和显示…...
Android10 Recovery系列(二)增加OTG升级功能
一 、背景 起因是遇到了客户有这个需求,本着了解的原则,去看了一下之前Android版本的代码,想看看之前有没有现成的实现,移植过来。结果很不幸,没有找到。于是自己开始了功能实现的过程。下面分享一下该功能的实现 二 、准备工作 首先简单了解一下Recovery 模块的系统升…...
el-popover使用自定义图标
使用el-popover实现鼠标点击或浮动到自定义图标上弹出表格弹窗,官方文档上使用的是按钮el-button,如果想换成图标或其他的组件的话直接把el-button替换掉即可。注意替换之后的组件一定要加slot“reference”,不然组件是显示不出来的。 代码如…...
KCOM4串口转键鼠控制线测试说明
1.KOCM4介绍 KCOM4是一款最新开发的串口转键盘鼠标控制线,采用32位内核,最大60Mhz的工作频率,完美适用于游戏挂机等应用场景(如果是用在工作电脑控制或展厅电脑控制推荐CH9329双头线)。KCOM4支持普通键盘、相对鼠标、…...
2023华数杯数学建模C题完整5问代码思路分析
目前已经写出2023华数杯C题母亲身心健康对婴儿成长的影响全部5问的完整代码和42页论文(正文30页,论文部分摘要如下: 本文共解决了五个问题,涉及婴儿行为特征、睡眠质量与母亲的身体指标和心理指标的关系,以及如何优化…...
02_kafka_基本概念_基础架构
文章目录 常见的消息队列工作模式基本概念kafka 特性Kafka 基本架构topic 分区的 目的/ 好处 日志存储形式消费者,消费方式 逻辑消费组 高性能写入: 顺序写 mmap读取:零拷贝DMA 使用场景 常见的消息队列工作模式 至多一次:消息被…...
HTTP 常用状态码 301 302 304 403
HTTP 常用状态码 301 302 304 403 301 永久重定向,浏览器会把重定向后的地址缓存起来,将来用户再次访问原始地址时,直接引导用户访问新地址 302 临时重定向,浏览器会引导用户进入新地址,但不会缓存原始地址,…...
分布式 - 服务器Nginx:一小时入门系列之静态网页配置
文章目录 1. 静态文件配置2. nginx listen 命令解析3. nginx server_name 命令解析4. nginx server 端口重复5. nginx location 命令 1. 静态文件配置 在 /home 文件下配置一个静态的AdminLTE后台管理系统: [rootnginx-dev conf.d]# cd /home [rootnginx-dev home…...
kubernetes网络之网络策略-----Network Policies - Example
创建一个Deployment并配置Service 创建一个 nginx Deployment 用于演示 Kubernetes 的 NetworkPolicy: kubectl create deployment nginx --imagenginx 输出结果 deployment.apps/nginx created通过Service暴露该Deployment kubectl expose deployment nginx --po…...
【GDI/GDI+】如何抓取屏幕保存到bitmap文件?
问题 如何抓取屏幕保存到bitmap文件? 方法 GDI 方法 1、抓取。 HBITMAP CRectChartUI::GetBitmap(HDC hDC) {HDC hMemDC;int x, y;int nWidth, nHeight;HBITMAP hBitmap, hOldBitmap;hMemDC CreateCompatibleDC(hDC);nWidth GetDeviceCaps(hDC, HORZRES);nHei…...
HDFS介绍
目录 编辑 一、HDFS基础 1.1 概述 1.2 HDFS的设计目标 1.2.1 硬件故障 1.2.2 流式数据访问 1.2.3 超大数据集 1.2.4 简单的一致性模型 1.2.5 移动计算而不是移动数据 1.2.6 跨异构硬件和软件平台的可移植性 1.3 基础概念 1.3.1 块(Block) 1.3.2 复制…...
每日一题——两数之和
题目 给出一个整型数组 numbers 和一个目标值 target,请在数组中找出两个加起来等于目标值的数的下标,返回的下标按升序排列。 (注:返回的数组下标从1开始算起,保证target一定可以由数组里面2个数字相加得到࿰…...
Maven: ‘mvn‘ is not recognized as an internal or external command
下载并配置好Maven之后,CMD测试安装是否成功:mvn -v 提示: mvn is not recognized as an internal or external command, operable program or batch file. 检查环境变量: MAVEN_HOME: %MAVEN_HOME%\bin: 看上去没问题&#x…...
CubeSLAM: Monocular 3D Object SLAM——论文简述
一、简介 提出一种在动态和静态环境中同时进行3D目标检测和定位建图的方法,并且能够互相提升准确度。具体地,对于3D目标,其位置、方向和尺寸通过slam进行了优化;而3D目标作为slam中的路标,可以提供额外的语义和几何约…...
【雕爷学编程】MicroPython动手做(30)——物联网之Blynk 2
知识点:什么是掌控板? 掌控板是一块普及STEAM创客教育、人工智能教育、机器人编程教育的开源智能硬件。它集成ESP-32高性能双核芯片,支持WiFi和蓝牙双模通信,可作为物联网节点,实现物联网应用。同时掌控板上集成了OLED…...
linux scp 拷贝文件到目标linux系统
scp -P 8866 -r jsonrpc/ root192.168.6.66:/folder_path...
Oracle-expdp报错ORA-39077、06502(Bug-16928674)
问题: 用户在使用expdp进程导出时,出现队列报错ORA-39077、ORA-06502 ORA-31626: job does not exist ORA-31638: cannot attach to job SYS_EXPORT_SCHEMA_01 for user SYS ORA-06512: at "SYS.DBMS_SYS_ERROR", line 95 ORA-06512: at "SYS.KUPV$…...
Docker 离线安装指南
参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性,不同版本的Docker对内核版本有不同要求。例如,Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本,Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...
23-Oracle 23 ai 区块链表(Blockchain Table)
小伙伴有没有在金融强合规的领域中遇见,必须要保持数据不可变,管理员都无法修改和留痕的要求。比如医疗的电子病历中,影像检查检验结果不可篡改行的,药品追溯过程中数据只可插入无法删除的特性需求;登录日志、修改日志…...
页面渲染流程与性能优化
页面渲染流程与性能优化详解(完整版) 一、现代浏览器渲染流程(详细说明) 1. 构建DOM树 浏览器接收到HTML文档后,会逐步解析并构建DOM(Document Object Model)树。具体过程如下: (…...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
JVM暂停(Stop-The-World,STW)的原因分类及对应排查方案
JVM暂停(Stop-The-World,STW)的完整原因分类及对应排查方案,结合JVM运行机制和常见故障场景整理而成: 一、GC相关暂停 1. 安全点(Safepoint)阻塞 现象:JVM暂停但无GC日志,日志显示No GCs detected。原因:JVM等待所有线程进入安全点(如…...
Device Mapper 机制
Device Mapper 机制详解 Device Mapper(简称 DM)是 Linux 内核中的一套通用块设备映射框架,为 LVM、加密磁盘、RAID 等提供底层支持。本文将详细介绍 Device Mapper 的原理、实现、内核配置、常用工具、操作测试流程,并配以详细的…...
【Go语言基础【12】】指针:声明、取地址、解引用
文章目录 零、概述:指针 vs. 引用(类比其他语言)一、指针基础概念二、指针声明与初始化三、指针操作符1. &:取地址(拿到内存地址)2. *:解引用(拿到值) 四、空指针&am…...
通过 Ansible 在 Windows 2022 上安装 IIS Web 服务器
拓扑结构 这是一个用于通过 Ansible 部署 IIS Web 服务器的实验室拓扑。 前提条件: 在被管理的节点上安装WinRm 准备一张自签名的证书 开放防火墙入站tcp 5985 5986端口 准备自签名证书 PS C:\Users\azureuser> $cert New-SelfSignedCertificate -DnsName &…...
【Kafka】Kafka从入门到实战:构建高吞吐量分布式消息系统
Kafka从入门到实战:构建高吞吐量分布式消息系统 一、Kafka概述 Apache Kafka是一个分布式流处理平台,最初由LinkedIn开发,后成为Apache顶级项目。它被设计用于高吞吐量、低延迟的消息处理,能够处理来自多个生产者的海量数据,并将这些数据实时传递给消费者。 Kafka核心特…...
智能职业发展系统:AI驱动的职业规划平台技术解析
智能职业发展系统:AI驱动的职业规划平台技术解析 引言:数字时代的职业革命 在当今瞬息万变的就业市场中,传统的职业规划方法已无法满足个人和企业的需求。据统计,全球每年有超过2亿人面临职业转型困境,而企业也因此遭…...
