vue3第三十五节(TS 之 泛型)

本节介绍 ts 中泛型的常用情景

1 什么是泛型

泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数。这种参数类型可以用在类、接口和方法的创建中,分别称为泛型类泛型接口泛型方法

泛型使用<T>来定义类型,<T>中的T,也可以是U也可以是其他合法的字母,建议大写。
泛型可以理解为不确定单独类型,函数中使用泛型,可以约束函数的参数和返回值类型相同。

2 泛型方法

比如我们定义一个 sum 方法

function sum(a:number): number {return a + a
}

这种定义的方法,我们传入的参数 a以及函数返回的数据 只能是 number 类型,不能是其他类型数据,否则会报错;但是我们通常需要的类型会很多,这时我们可以定义一个类似通用的函数;
可能有同学会说我们可以定义一个any 类型的呀,但是这样就违背我们使用ts的初衷了,
那么我们可以这样写
T:表示类型变量,而这个变量只能是 类型,而不是值

function sum<T>(a:T):T{return a +a
}

那么我们在使用的时候可以这样写

const a = sum<string>('2') 
// 4 指定泛型此时的类型是 string,则传入的值也必须是String类型
const b = sum<number>(4) 
// 8 指定泛型此时 的类型是 number,则传入的值,以及返回的值均为 Number 类型数据

3 传入多个泛型

const fun = <T,U>(a:T, b:U) => {console.log(a, b)
}

此时的 a,b可以是不同的类型,也可以是相同的类型
使用

fun<string, number>('1', 2) // '1', 2传入的是a参数约定是 String类型b参数约定是 number 类型

4 常用的泛型名称

TType的缩写,类型
K、Vkey和value的缩写,键值对
EElement的缩写,元素
OObject的缩写,对象

5 泛型接口

一般的函数接口我们这样定义

interface Person {(value1: string, value2: string): string;
}

当我们定义泛型函数接口时候可以这样写

interface Person<T> {(value: T): T;
}

或者

interface Person {<T>(value: T): T;
}

// 使用泛型 约定为 string类型

let nam: Person<string> = 'Andy'

定义一般泛型接口
还可以指定默认的类型

interface Person<T=string, U=number>{age: T;name: U;
}

6 泛型约束

比如我们想要传入的参数中有必须有某种类型

interface Say {length: number;
}
function Person<T extends Say>(arg: T) {console.log(arg.length);// 此时arg参数中必须含有 length属性,并且属性的类型是 number,否则就会报错
}
T extends表示传入的类型必须是extends后面的类型或者子类型。

例如:

Person({length:10, name: 'Andy'}) // 传入一个含有length 属性的数据
Person([1,2,3,4,5,6,7,8,9]) // 数组类型默认含有 length 属性
Person('123444') // String 类型数据自带 length 属性

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

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

相关文章

使用canarytokens进行入侵检测

canarytokens 基本概念 canarytokens是一种用于识别网络入侵的工具。它们是一种虚拟的“蜜罐”&#xff0c;可以在网络上放置&#xff0c;当有人尝试访问它们时&#xff0c;可以立即触发警报&#xff0c;以便及时发现潜在的安全威胁。这些token可以是各种形式&#xff0c;可以…

项目管理基础知识

项目管理基础知识 导航 文章目录 项目管理基础知识导航一、项目相关概念二、时间管理三、人员管理四、风险管理 一、项目相关概念 项目定义的三层意思 一定的资源约束:时间资源、经费资源、人力资源一定的目标一次性任务 里程碑 是项目中的重要时点或事件持续时间为零&…

深度神经网络——什么是迁移学习?

1.概述 在练习机器学习时&#xff0c;训练模型可能需要很长时间。从头开始创建模型架构、训练模型&#xff0c;然后调整模型需要大量的时间和精力。训练机器学习模型的一种更有效的方法是使用已经定义的架构&#xff0c;可能具有已经计算出的权重。这是背后的主要思想 迁移学习…

makefile一些特殊且常用的符号

$^&#xff1a;表示所有的依赖文件列表&#xff0c;多个文件以空格分隔。 $&#xff1a;表示目标文件的名称。 $<&#xff1a;表示第一个依赖文件的名称。 $*&#xff1a;表示目标文件的主文件名&#xff08;不包括扩展名&#xff09;。 $?&#xff1a;表示所有比目标文件更…

前端面试题日常练-day26 【面试题】

题目 希望这些选择题能够帮助您进行前端面试的准备&#xff0c;答案在文末。 1. Vue中&#xff0c;以下哪个选项可以用于在组件之间传递数据&#xff1f; a) props b) emit c) model d) data 2. 在Vue中&#xff0c;以下哪个指令可以用于条件性地渲染一个元素&#xff1f; …

【Python设计模式10】外观模式

外观模式&#xff08;Facade Pattern&#xff09;是一种结构型设计模式&#xff0c;它通过提供一个统一的接口&#xff0c;来简化客户端与复杂系统之间的交互。外观模式为子系统中的一组接口提供一个高层接口&#xff0c;使得子系统更容易使用。 外观模式的结构 外观模式主要…

【学习心得】超简单的加载模型和保存模型的方法

方法一&#xff1a;pickle库 这是Python的标准序列化模块&#xff0c;可以将几乎任何Python对象转化为字节流&#xff08;即序列化&#xff09;&#xff0c;然后可以将其存储到文件中或通过网络发送。之后&#xff0c;可以使用pickle再次加载这个字节流&#xff0c;恢复原始对象…

Linux shell命令

cat 文件名 查看文件内容&#xff0c; tac文件名 倒着显示。 more 文件名 显示内容 less文件名 和more的功能一样&#xff0c;按上下左右键&#xff0c;按Q键结束。 head文件名&#xff0c;只显示前10行内容。 ln是一个默认创建硬链接的命令 ln 文件名 ls -i文件名…

全栈:Web 用户登录过程实例与Cookie管理

用户创建与使用cookie全过程 1.用户访问网站 当用户使用浏览器访问一个网站时&#xff0c;浏览器会向服务器发送一个HTTP请求。 2. 服务器响应请求 服务器接收到HTTP请求后&#xff0c;会处理请求并准备响应。如果服务器需要设置Cookie&#xff0c;它会在HTTP响应头中包含一…

SpringBoot整合RabbitMQ的快速使用教程

目录 一、引入依赖 二、配置rabbitmq的连接信息等 1、生产者配置 2、消费者配置 三、设置消息转换器 四、生产者代码示例 1、配置交换机和队列信息 2、生产消息代码 五、消费者代码示例 1、消费层代码 2、业务层代码 在分布式系统中&#xff0c;消息队列是一种重要…

#职场发展#其他

一闪论文是目前市场上一款非常靠谱的论文写作工具&#xff0c;不仅可以帮助用户快速完成论文撰写&#xff0c;还能对文章进行查重降重&#xff0c;确保内容原创性。从用户的角度来看&#xff0c;一闪论文确实是一个非常方便、实用的工具&#xff0c;能够大大提高写作效率&#…

00Java准备工作

目录 JDK的安装目录 JAVA环境变量的配置 JAVA小知识 JDK的安装目录 目录名称说明bin该路径下存放了JDK的各种工具命令,javac和java就放在这个目录conf该路径下存放了JDK的相关配置文件include该路径下存放了一些平台特定的头文件jmods该路径下存放了JDK的各种模块legal该路…

简单随机数据算法

文章目录 一&#xff0c;需求概述二&#xff0c;实现代码三、测试代码四、测试结果五、源码传送六、效果演示 一&#xff0c;需求概述 系统启动时&#xff0c;读取一组图片数据&#xff0c;通过接口返回给前台&#xff0c;要求&#xff1a; 图片随机相邻图片不重复 二&#…

Java数据结构与算法(散列表)

前言 散列表是根据关键码值(Key value)而直接进行访问的数据结构。也就是说&#xff0c;它通过把关键码值映射到表中一个位置来访问记录&#xff0c;以加快查找的速度。而key的冲突主要通过链表的方式来处理&#xff0c;后期链表过长情况下可以通过红黑树来优化查询效率。 实…

进程互斥经典问题(读写者问题、理发店问题)

目录 读写者问题 问题描述 问题分析 进程互斥问题三部曲 读者写者算法实现 一、找进程——确定进程关系 二、找主营业务 三、找同步约束 a.互斥 b.资源 c.配额 理发店问题 问题描述 问题分析 进程互斥问题三部曲 理发店问题算法实现 一、找进程——确定进程…

SB-OSC,最新的 MySQL Schema 在线变更方案

目前主流的 MySQL 在线变更方案有两个&#xff1a; 基于 trigger 的 pt-online-schema-change基于 binlog 的 gh-ost 上周 Sendbird 刚开源了他们的 MySQL Schema 在线变更方案 SB-OSC: Sendbird Online Schema Change。 GitHub 上刚刚 25 颗星星&#xff0c;绝对新鲜出炉。 …

Qt Creator(2)【如何在Qt Creator中创建新工程】

阅读导航 引言一、Qt Creator开始界面介绍二、如何在Qt Creator中创建新工程1. 新建项目2. 选择项目模板3. 选择项目路径4. 选择构建系统5. 填写类信息设置界面6. 选择语言和翻译文件7. 选择Qt套件8. 选择版本控制系统9. 最终效果 三、认识Qt Creator项目内容界面1. 基本界面2.…

React Native 之 处理触摸事件(八)

React Native 提供了可以处理常见触摸手势&#xff08;例如点击或滑动&#xff09;的组件&#xff0c; 以及可用于识别更复杂的手势的完整的手势响应系统。 Button是一个简单的跨平台的按钮组件。下面是一个最简示例&#xff1a; <ButtononPress{() > {Alert.alert(你点…

go语言初识别(五)

本博客内容涉及到&#xff1a;切片 切片 1. 切片的概念 首先先对数组进行一下回顾&#xff1a; 数组定义完&#xff0c;长度是固定的&#xff0c;例如&#xff1a; var num [5]int [5]int{1,2,3,4,5}定义的num数组长度是5&#xff0c;表示只能存储5个整形数字&#xff0c…

检索模型预训练方法:RetroMAE

论文title&#xff1a;https://arxiv.org/pdf/2205.12035RetroMAE: Pre-Training Retrieval-oriented Language Models Via Masked Auto-Encoder 论文链接&#xff1a;https://arxiv.org/pdf/2205.12035 摘要 1.一种新的MAE工作流&#xff0c;编码器和解器输入进行了不同的掩…