Typescript 学习笔记(二)高级类型二

news2024/11/29 20:48:15

交叉类型

交叉类型(&):功能类似于接口继承(extends),用于组合多个类型为一个类型(常用于对象类型)

interface Person2 {name: string}
interface Contact {phone: number}
type PersonDetail = Person2 & Contact

let Obj: PersonDetail = {
    name: 'Anas',
    phone: 1111
}

交叉类型(&)和接口继承(extends)的对比:
相同点:都可以实现对象类型的组合。
不同点:两种方式实现类型组合时,对于同名属性之间,处理类型冲突的方式不同。

接口类型

interface A {
    fn: (value: number) => void
}
interface B extends A {
    fn: (value: string) => void
}

产生报错
在这里插入图片描述

交叉类型

interface A {
    fn: (value: number) => void
}
interface B {
    fn: (value: string) => void
}

type C = A & B

let c: C = {fn(value: number| string){}}
c.fn()

泛型

泛型是可以在保证类型安全前提下,让函数等与多种类型一起工作,从而实现复用,常用于:函数、接口、class 中。
需求:创建一个 id 函数,传入什么数据就返回该数据本身(也就是说,参数和返回值类型相同)

function id<Type>(value: Type): Type {
    return value
} 

const num =  id<number>(10)

简单调用泛型函数

const str = id('a')

添加泛型约束收缩类型,主要有以下两种方式:1 指定更加具体的类型 2 添加约束。

  1. 指定更加具体的类型
function id<Type>(value: Type[]): Type[] {
    console.log(value.length)
    return value
}

2 添加约束

interface ILENGTH {length: number}

function id<Type extends ILENGTH> (value: Type): Type {
    console.log(value.length)
    return value
}

const num3 =  id<string>('100')

多个泛型变量

泛型的类型变量可以有多个,并且类型变量之间还可以约束(比如,第二个类型变量受第一个类型变量约束)
比如,创建一个函数来获取对象中属性的值:

function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) {
    console.log(obj[key])
    return obj[key]
}

let person = {name: 'Anas', age: 18}
getProp(person, 'name') //正常运行
getProp(person, 'name1') //报错

泛型接口

泛型接口:接口也可以配合泛型来使用,以增加其灵活性,增强其复用性

interface IdFunc<Type> {
    id: (value: Type) => Type
    ids: () => Type[]
}

let obj6: IdFunc<number> = {
    id(value) {return value},
    ids() {return [1, 2, 3]}
}

泛型类

class GenericNumber<NumType> {
    defaultValue: NumType
    add: (x: NumType, y: NumType) => {}
    constructor(value: NumType) {
        this.defaultValue = value
    }
}

const myNum = new GenericNumber<number>(100)

myNum.defaultValue = 10
myNum.add('a', 'b') //报错

泛型工具类型

泛型工具类型:TS 内置了一些常用的工具类型,来简化 TS 中的一些常见操作
它们都是基于泛型实现的(泛型适用于多种类型,更加通用),并且是内置的,可以直接在代码中使用。
这些工具类型有很多,主要学习以下几个:

  1. Partial
  2. Readonly
  3. Pick<Type, Keys>
  4. Record<Keys, Type>

泛型工具类型 - Partial

泛型工具类型 - Partial 用来构造(创建)一个类型,将 Type 的所有属性设置为可选

interface Props {
    id: string
    children: string[]
}

type PartialProp = Partial<Props>

let pp:PartialProp = {}

在这里插入图片描述

泛型工具类型 - Readonly

泛型工具类型 - Readonly 用来构造一个类型,将 Type 的所有属性都设置为 readonly(只读)

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

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

相关文章

有一个是对的,就是坚持去做难的事情。

不要总是想着去找那些让自己赚到的工作&#xff0c;你自己心里清楚&#xff0c;自己有几斤几两&#xff0c;配什么样的公司。不要贪&#xff0c;不然最后原本该得到的都没有得到。你找差点的工作心里也踏实对不对&#xff0c;不会说比较慌&#xff0c;每天都过不安稳。不要幻想…

软件设计师--其他高频考点总结

视频2022软件设计师-提炼高频考点-个人学习过程的总结&#xff0c;仅供参考&#xff01;_哔哩哔哩_bilibili 目录 1&#xff0c;网络攻击 2&#xff0c;网络安全 3,防火墙 4&#xff0c;耦合 --模块之间相对独立性的度量 5&#xff0c;内聚--模块间内部元素彼此紧密的程度…

Python与爬虫有什么关系?

爬虫一般是指网络资源的获取&#xff0c;因为python的脚本特征&#xff0c;Python易于配置&#xff0c;对字符的处理也非常灵活&#xff0c;加上python有丰富的网络抓取模块&#xff0c;所以两者经常联系在一起。 接下来我们可以详情了解python到底有什么作用。 首先Python翻译…

B树和B+树的区别

【篇首语】&#xff1a; 渐渐地&#xff0c;面试时被问起数据结构&#xff0c;MySQL调优&#xff0c;索引的原理等。首先感谢《王道计算机考研》的一些课程&#xff0c;让我学到了很多。 其实在这个问题之前&#xff0c;应该先了解扇区、磁道、磁盘存储数据的方式等相关概念&a…

荧光标记染料:diSulfo-Cy3 azide,2055138-89-9,二磺酸-Cy3-叠氮

【中文名称】二磺酸-Cy3-叠氮 【英文名称】 diSulfo-Cy3 azide 【结 构 式】 【CAS】2055138-89-9 【分子式】C33H41KN6O7S2 【分子量】736.94 【纯度标准】95% 【包装规格】1mg&#xff0c;5mg&#xff0c;10mg 【是否接受定制】可进行定制 【外观颜色】 红色固体&#xff0…

Spring注解@NonNull作用 Spring注解@Nullable作用 Spring NonNull 注解作用 Spring Nullable注解作用

Spring注解NonNull作用 Spring注解Nullable作用 Spring NonNull 注解作用 Spring Nullable注解作用 一、概述 在看Spring源码的时候&#xff0c;经常会发现有 NonNull 或 Nullable 注解的标记&#xff0c;一般是在方法上&#xff0c;或在 参数中&#xff0c;本着好奇的心里&…

【JavaWeb】第三章 JavaScript基础

文章目录1、JavaScript介绍2、JavaScript和HTML代码的结合方式2.1 第一种方式2.2 第二种方式3、JS的变量和数据类型4、JS关系运算符5、JS逻辑运算符6、数组7、JS函数的定义8、JS函数的隐形参数arguments9、JS中的自定义对象1、JavaScript介绍 JavaScript&#xff08;JS&#x…

摸鱼时,我用几百张字符画做了个动画......

摸鱼时&#xff0c;我用几百张字符画做了个动画…&#xff0c;话不多说&#xff0c;先来看成果&#xff1a; 完整效果视频已上传至B站&#xff1a;摸鱼时我用Java IO流证明了爱坤&#xff01; 事情是这样的… … 学校马上就要开展第20届程序设计大赛了&#xff0c;半年没有练…

Java对象深拷贝 终极方案 deep clone an object

Java对象深拷贝 终极方案定义 深拷贝深拷贝常见误区spring / apache commons 等工具类的 BeanUtils.copy 方法 ❌正确做法&#xff1a; 上中下3策 ✔json 序列化 (用jackson&#xff0c;别用其他的gson/fastjson/json-lib 等&#xff0c;不解释)objectMapper 工具类初始化1. 对…

CDC Schemes

CDC Schemes 下面是一些questa使用时常见的cdc schemes的解释 reconvergence reconvergence的原理如下图所示 如上图所示,sig1和sig2经sync cell同步过来后,又在组合逻辑上reconvergence了,最后送到rx domain的flip-flop上; Fan-in of a flip-flop includes at least t…

跨境物流美国专线的注意事项是哪些

目前国内运输需求最大的物流运输是美国专线&#xff0c;深圳、广州、杭州等地有很多美国专线货运公司。虽然每个人的选择都比较灵活&#xff0c;但是专线物流运输也有很多注意事项&#xff0c;否则会影响货物的运输。那么对于跨境物流美国专线的注意事项&#xff0c;你了解多少…

7. Spring Boot2.5 安全机制与 REST API 身份验证实战

文章目录Spring Boot2.5 安全机制与 RESTAPI 身份验证实战一、Java Spring Boot 2.5 安全机制Java Spring Boot 2.0 安全机制安全漏洞安全漏洞建议总结&#xff1a;Java Spring SecurityJava 安全框架 Shiro二、Java Spring Boot 2.5 安全实战Spring Security Demo2. WebSecuri…

【Python】pyinstaller打包百科全书

前言 记录pyinstaller打包中的常用命令和报错。 详细的还是去官网自己看吧&#xff0c;这里只记录打包中常用到的命令。 如果我这里帮助不到你&#xff0c; 官网在这里&#xff1a;https://github.com/pyinstaller/pyinstaller 这两篇文章基本覆盖100%的报错了&#xff0c; 参…

【微服务】分布式下服务调用产生的问题之服务容错

服务容错前言模拟高并发场景压测测试服务雪崩效应常见容错方案隔离超时限流熔断降级常见的容错组件HystrixResilience4JSentinel总结前言 上篇中&#xff0c;我们了解了Ribbon的概念&#xff0c;也实现了基于Ribbon的服务调用&#xff0c;但同样也引发了另一个问题&#xff0c…

什么?“裸辞”一个月拿到13家offer,网友:你是在找存在感吗···

相信大家都知道天下分久必合、合久必分的道理&#xff0c;所以&#xff0c;一旦行业发展成熟&#xff0c;必定会重新洗牌&#xff0c;就像朝代的更替一样&#xff0c;去其糟粕&#xff0c;取其精华&#xff01;现在互联网发展就是遇到了这样的瓶颈期&#xff0c;出现了衰退&…

【Mac】VSCode 更新1.73版本后JSTS代码跳转异常

前言 今天有小伙伴MacOS更新了VS Code版本后&#xff0c;说工程内的代码跳转全部异常了&#xff0c;没法正确跳转。搞了两三个小时没搞出来&#xff0c;找到了我&#xff0c;让我帮忙瞧瞧。排查下来发现这问题有点意思&#xff0c;故此记录一下。 问题 排查姿势 1. 提示没有定…

【数据结构】单链表

文章目录单链表链表的概念及结构链表的分类链表的实现动态申请一个节点创建链表单链表打印单链表尾插单链表尾删单链表头插单链表头删单链表 链表的概念及结构 概念&#xff1a;链表是一种物理存储结构上连续、非顺序的存储结构&#xff0c;数据元素的逻辑顺序 是通过链表中的…

代码中统一异常如何处理,才能让代码更清晰

背景 软件开发过程中&#xff0c;不可避免的是需要处理各种异常&#xff0c;甚至有一半以上的时间都是在处理各种异常情况&#xff0c;所以代码中就会出现大量的try {...} catch {...} finally {...} 代码块&#xff0c;不仅有大量的冗余代码&#xff0c;而且还影响代码的可读…

力扣刷题链表需要调试?一个简单的调试器帮你解决苦恼

本人在刷链表题时&#xff0c;由于是新手&#xff0c;所以老是过不去&#xff0c;需要调试&#xff0c;力扣会员开不起&#xff0c;在VS自己创建一个链表太麻烦 &#xff0c;所以就有了今天这个 对于懒人的调节力扣链表便捷器 这个东西很简单&#xff0c;但是很有效 文章目录1.…

python数学建模--sympy三维图像绘制

目录问题引出库选择与绘制准备plot3d类api简介图像绘制与参数说明关键字参数绘图举例绘图的案例三角函数另一个三角函数问题引出 在求解二元函数最值的时候&#xff0c;我们不知道自己经过若干个步骤求出的结果是否正确&#xff0c;那么我们该怎么办呢&#xff1f;一种办法就是…