TypeScript 中的高级类型(联合、交叉、泛型、映射类型)

文章目录

  • 一、联合类型(Union Types)
  • 二、交叉类型(Intersection Types)
  • 三、泛型
    • 3.1 泛型结合extends
    • 3.2 泛型结合 keyof
    • 3.3 extends keyof 和 in keyof 的区别
  • 四、条件类型(Conditional Types)

TypeScript 中的高级类型为开发人员提供了更多强大的工具,用于处理复杂的类型场景

一、联合类型(Union Types)

联合类型允许一个变量具有多种不同类型中的一种。这在需要处理多个类型可能值的情况下非常有用,关键字符|

function fn(data:string|number){console.log(data)
}
fn(1);
fn('abc')

二、交叉类型(Intersection Types)

交叉类型将多个类型合并为一个新的类型。这对于创建新的对象类型或混合现有对象类型非常有用,关键字符&

nterface  Cat{name:string,age:number
}interface Dog{runningSpeed:number
}type Bird  = Cat & Dog;const bird:Bird = {name:'xixi',age:2,runningSpeed:10
}

三、泛型

泛型是一种特殊的类型,它可以用来创建可重用的组件,这些组件可以支持多种类型。泛型使得我们能够编写更灵活、更健壮的代码,同时使代码更易于维护和重用。

function fn<T>(arg: T): T {return arg;
}// 使用方式
let output = fn<string>("hello");

在上面的例子中,<T> 表示这个函数使用了一个泛型类型 T,它表示这个函数可以适用于任意类型。当我们调用 fn 函数时,我们可以指定具体的类型,也可以让 TypeScript 根据参数类型进行推断。

3.1 泛型结合extends

通过使用 extends,我们可以约束泛型的范围,从而达到增强类型检查和提高代码健壮性的目的。

interface Len {length: number;
}function fn<T extends Len>(name: T): number {return name.length;
}
fn("123");
fn([1,2,3]);

在上面的例子中,<T> 表示这个函数使用了一个泛型类型 T,T传入的类型,可以有其他属性,但必须有length这个属性。

3.2 泛型结合 keyof

keyof 是 TypeScript 中的一个操作符,它用于获取对象类型的所有键

interface Cat{name: string;age: number;
}type keysType = keyof Cat;    //等同于 type keysType = 'name' | 'age' 
interface Person {name: string;age: number;
}function person<T extends Person, K extends keyof T>(obj: T, key: K): T[K] {return obj[key];
}console.log(person({ name: "qiyan", age: 18 }, "name"));

在上面的例子中,通过使用泛型 K extends keyof T,我们确保了 key 参数必须是对象 T 的一个键

3.3 extends keyof 和 in keyof 的区别

  • extends keyof 组合通常用于泛型约束,它可以限制泛型变量必须是某个特定类型的键之一
interface Person {name: string;age: number;
}function person<T extends Person, K extends keyof T>(obj: T, key: K): T[K] {return obj[key];
}

K extends keyof T 表示泛型 K 必须是类型 T 的键之一。这样,在使用 person函数时,传入的 key 参数必须是对象 T 的一个有效键,否则 TypeScript 将会给出类型检查错误。

  • in keyof 通常用于迭代类型中的所有键,并生成新的类型
    在这里插入图片描述
    上面in keyof这种类型称为映射类型,基于旧类型创建新类型(对象类型),减少重复、提升开发效率

四、条件类型(Conditional Types)

条件类型允许根据类型关系选择要使用的类型。这在泛型类型的操作中非常有用

type A<T> = T extends null | undefined ? never : T;type B= string | null | undefined;
type C= A<B>; // string

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

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

相关文章

【C++】— —期末复习题(五)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

原核蛋白表达——卡梅德生物

在生物技术领域&#xff0c;原核蛋白表达系统作为一项重要的生物工程技术&#xff0c;为研究者提供了简便高效的蛋白质表达解决方案。本文将介绍原核蛋白表达的基本原理、常用的表达系统和载体&#xff0c;以及与真核蛋白表达系统的对比。 原核蛋白表达基于细菌细胞&#xff08…

音视频技术开发周刊 | 324

每周一期&#xff0c;纵览音视频技术领域的干货。 新闻投稿&#xff1a;contributelivevideostack.com。 467亿参数MoE追平GPT-3.5&#xff01;爆火开源Mixtral模型细节首公开&#xff0c;中杯逼近GPT-4 今天&#xff0c;Mistral AI公布了Mixtral 8x7B的技术细节&#xff0c;不…

Apache Doris 在奇富科技的统一 OLAP 场景探索实践

导读&#xff1a;随着消费信贷规模快速增长&#xff0c;个人信贷市场呈现场景化、体验感强的特征&#xff0c;精准营销、精细化风险管理以及用户使用体验的优化愈发重要。作为中国卓越的由人工智能驱动的信贷科技服务平台&#xff0c;奇富科技选择将 Apache Doris 作为整体 OLA…

【离散数学】——期末刷题题库(树其一)

&#x1f383;个人专栏&#xff1a; &#x1f42c; 算法设计与分析&#xff1a;算法设计与分析_IT闫的博客-CSDN博客 &#x1f433;Java基础&#xff1a;Java基础_IT闫的博客-CSDN博客 &#x1f40b;c语言&#xff1a;c语言_IT闫的博客-CSDN博客 &#x1f41f;MySQL&#xff1a…

城市智能图书柜需求说明书

1. 简介 1.1 项目概括 本项目主要实现智能图书柜对图书的借出、还回、续借、查询、上下架、盘点的功能&#xff0c;对于读者&#xff0c;可以进行读者证的办理&#xff0c;读者信息的录入和完善。 1.2 项目背景 ​ 目前大量读者距离图书馆较远&#xff0c;无法方便、快捷地…

MyBatis拦截器详解与实例演示

MyBatis是一个广泛用于Java持久层的ORM框架,它通过将Java对象与数据库表进行映射,简化了数据库访问的过程。为了提供更高度的可定制性和灵活性,MyBatis引入了拦截器机制,允许开发者在执行SQL语句的不同阶段插入自定义逻辑。在本文中,我们将深入探讨MyBatis拦截器的原理,并…

IDEA运行JSP启动后页面中文乱码

源代码截图&#xff1a; 运行结果截图&#xff1a; 在<head>标签内加入代码 <% page contentType"text/html; charsetgb2312"%> 重启服务器&#xff0c;问题已改善 ————————————————— 该文仅供学习以及参考&#xff0c;可做笔记收藏…

泛型深入理解

泛型的概述 泛型&#xff1a;是JDK5中引入的特性&#xff0c;可以在编译阶段约束操作的数据类型&#xff0c;并进行检查。 泛型的格式&#xff1a;<数据类型>; 注意&#xff1a;泛型只能支持引用数据类型。 集合体系的全部接口和实现类都是支持泛型的使用的。 泛型的…

DHCP的开源实现及其在不同Linux发行版上的安装过程

DHCP&#xff08;Dynamic Host Configuration Protocol&#xff09;是一种网络协议&#xff0c;用于自动分配IP地址、子网掩码、默认网关、DNS服务器等网络配置信息给连接到网络的设备。以下是一些常用的DHCP开源实现及其在不同Linux发行版上的安装过程。 1. isc-dhcp-server …

vue常用指令及其作用

常用指令有&#xff1a; 内容渲染指令&#xff1a;v-html , v-text 作用&#xff1a;给元素添加内容 条件渲染指令&#xff1a;v-show , v-if , v-else , v-else-if 作用&#xff1a;控制元素是否显示与隐藏&#xff08;v-else , v-else-if辅助v-if进行判断渲染&#xff0c…

【功能更新】支持文档合并导出PDF/HTML格式;线上文章SEO设置能力优化

HelpLook功能更新速览&#x1f447; 文档管理能力&#xff1a; 1. 导出支持多篇文档合在一个HTML文件 2. 支持下载附件时保留原始文件名 3. 主页“推荐文章”支持添加外链 4. 文章URL根据标题自动生成 5. 文章支持添加“作者” 6. 博客模版支持置顶文章 1.导出支持多篇文…

通配符证书的优势有哪些?

在互联网安全的长河中&#xff0c;通配符证书以其独特的优势成为了许多网域管理员的首选。那么&#xff0c;它究竟有哪些魅力点呢&#xff1f;让我们从安全性、性价比和管理便捷性三个维度来解读一下。 安全性&#xff1a;标配的坚实防线 首先&#xff0c;从安全性角度来看&am…

邮件营销:定义、优势与策略指南

什么是邮件营销&#xff1f;跨境电商或者出海企业可能会经常使用它&#xff0c;它是传统的营销方式之一&#xff0c;在上世纪80年年代得以运用。 邮件营销&#xff0c;英文全称为Email Direct Marketing&#xff0c;缩写为EDM。它是指在收件人许可的情况下&#xff0c;通过电子…

前端开发新趋势:Web3、区块链和虚拟现实

目录 前言 Web3&#xff1a;下一代互联网 区块链技术 去中心化应用程序&#xff08;DApps&#xff09; 区块链&#xff1a;重塑数字世界 数字钱包 NFT&#xff08;非同质化代币&#xff09; 虚拟现实&#xff1a;沉浸式体验 WebVR和WebXR 三维图形 新挑战与机会 性…

final

final final关键字是最终的意思&#xff0c;可以修饰&#xff08;类、方法、变量&#xff09;修饰类&#xff1a;该类被称为最终类&#xff0c;特点是不能被继承了修饰方法&#xff1a;该方法被称为最终方法&#xff0c;特点是不能被重写了修饰变量&#xff1a;该变量只能被赋…

【SpringCloudAlibaba】Sentinel熔断限流工具的使用

一、前言 随着微服务的流行&#xff0c;服务和服务之间的稳定性变得越来越重要。Sentinel 是面向分布式、多语言异构化服务架构的流量治理组件&#xff0c;主要以流量为切入点&#xff0c;从流量路由、流量控制、流量整形、熔断降级、系统自适应过载保护、热点流量防护等多个维…

远程使用树莓派通过蓝牙播放音频文件方法

本文主要介绍远程使用树莓派通过蓝牙播放音频文件的方法。 1 环境 硬件&#xff1a;树莓派4b&#xff08;piOS&#xff09;, 笔记本&#xff08;windows10&#xff09; 软件&#xff1a;mplayer&#xff08;在Pi上下载&#xff09;, putty(笔记本上安装) 外设&#xff1a;蓝…

9.鸿蒙app用户界面的跳转abilityslice的跳转

9.用户界面的跳转abilityslice的跳转&#xff0c;值传递&#xff0c;数值累加 首页页面显示1&#xff0c;第2页显示2&#xff0c;再次点击返回首页3。。。 MainAbilitySlice.java 关键代码&#xff1a; 点击事件 text.setClickedListener(new Component.ClickedListener() …

【回溯】【DFS】51.N皇后

题目 class Solution {public List<List<String>> solveNQueens(int n) {List<List<String>> res new ArrayList<>();char[][] tmp new char[n][n];for (int i 0; i < n; i) {Arrays.fill(tmp[i], .);}dfs(tmp, 0, res);return res;}publ…