TypeScript-泛型

news2024/10/7 0:27:53

泛型(Generics)

指在定义接口,函数等类型的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性,使用泛型可以复用类型并且让类型更加灵活

泛型接口-interface

语法:在 interface 接口类型的名称后面使用 <T> 即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型

interface ResData<T> {}

效果:

思路:

1️⃣ 找到可变的类型部分通过泛型<T>抽象为泛型参数(定义参数)

// 定义泛型,把可变的部分抽象成泛型参数T
interface ResData<T> {
  code: number
  msg: string
  data:T
}

2️⃣ 在使用泛型的时候,把具体类型传入到泛型参数位置(传参)

// 定义具体类型,使用泛型的时候传入到参数的位置
interface User {
  name: string
  age: number
}

interface Goods {
  id: number
  goodName: string
}

let User:ResData<User> = {
  code:200,
  msg:'success',
  data:{
    name: 'lili',
    age:18
  }
}
let Goods:ResData<Goods> = {
  code:200,
  msg:'success',
  data:{
    id: 1,
    goodName:'裙子'
  }
}
console.log(User)
console.log(Goods)

泛型别名type

语法:在类型别名type的后面使用<T>即可声明一个泛型参数,接口里的其他成员都能使用该参数的类型

type ResData<T> = {}
// 定义泛型,把可变的部分抽象成泛型参数T
type ResData<T> = {
  code: number
  msg: string
  data:T
}
// 定义具体类型,使用泛型的时候传入到参数的位置
type User = {
  name: string
  age: number
}

type Goods = {
  id: number
  goodName: string
}

let User:ResData<User> = {
  code:200,
  msg:'success',
  data:{
    name: 'lili',
    age:18
  }
}
let Goods:ResData<Goods> = {
  code:200,
  msg:'success',
  data:{
    id: 1,
    goodName:'裙子'
  }
}
console.log(User)
console.log(Goods)

泛型函数

语法:在函数名称的后面使用<T>即可声明一个泛型参数,整个函数中(参数、返回值、函数体) 的变量都可以使用该参数的类型

function fn<T>(){}
// 泛型函数
function createArray<T>(length: number,value: T){
  let res = []
  for(let i = 0; i < length; i++) {
    res[i] = value
  }
  return res
}

createArray<number>(3,100)
createArray<string>(3,'100')

泛型约束

作用:泛型的特点:灵活不确定;有时候泛型函数的内部需要访问一些特定类型的数据才有的属性,此时会有类型错误,需要通过泛型约束解决

interface LengthObj {
  length: number
}

// 限制了obj身上必须y有length属性才能通过校验
function logLen1<T extends LengthObj>(obj: T){
  console.log(obj.length)
}

logLen1({length: 10})
logLen1(['100'])

总结:

1️⃣ 泛型的好处是什么?

增加类型的 复用性 和 灵活性

2️⃣ 泛型实现的基本方法是什么?

找到类型不确定的类型部分,定义泛型参数
定义具体类型,传入泛型参数的位置

3️⃣ 泛型约束的作用是什么?

既可以保留泛型的灵活性,又做了特定的限制

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

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

相关文章

中国上市公司融资约束指数数据上市公司SA指数与WW指数(2000-2023年)

上市公司融资约束指数&#xff0c;是用来评估公司面临的融资限制程度的工具。SA指数由Hadlock和Pierce开发&#xff0c;基于公司规模和年龄计算&#xff0c;其中较小且较年轻的公司通常会有更高的指数值&#xff0c;表明其融资约束较大。另一方面&#xff0c;WW指数由Whited和W…

【Crypto】Rabbit

文章目录 一、Rabbit解题感悟 一、Rabbit 题目提示很明显是Rabbit加密&#xff0c;直接解 小小flag&#xff0c;拿下&#xff01; 解题感悟 提示的太明显了

blender安装cats-blender-plugin-0-19-0插件,导入pmx三维模型

UE5系列文章目录 文章目录 UE5系列文章目录前言一、Blender安装二、cats-blender-plugin-0-19-0插件下载三、下载bmp文件四、在blender2.93中安装cats-blender-plugin-0-19-0插件 前言 blender本身不支持pmx三维模型&#xff0c;需要用到cats-blender-plugin-0-19-0插件。 一…

rocketmq常用命令与控制面板

1.查看 消费进度 sh mqadmin consumerProgress -n 192.168.208.191:9876 -g <消费组> #查看所有topic :sh mqadmin topicList -n 192.168.1.23:9876#topic路由信息  sh mqadmin topicRoute –n 192.168.208.190:9876 –t testb#删除topicsh mqadmin deleteTopic -n 19…

第十一节 SpringBoot Starter 面试题

一、面试题 很多同学的简历都写着熟悉 SpringBoot&#xff0c; 而 Starter 的实现原理被当作的考题的的情况越来越多。 来源牛客网关于 starter 的一些面试题 情景一、路虎一面 情景二、蔚来 情景三、同花顺 Starter 频频出现&#xff0c;因此在面试准备时&#xff0c;这道题…

获得 AI Applied Skills 凭证:微软在线评估认证的注意事项

在你踏上微软的亚洲AI奥德赛之旅&#xff0c;完成基础课程学习后&#xff0c;你可以继续进行相应的评估&#xff0c;在交互式实验室体验中完成一系列任务&#xff0c;通过线上即时评估赢得认证。通过本文的介绍&#xff0c;可以帮助你了解评估认证的一些细节以及注意事项&#…

【数学建模】储药柜的设计

2014高教社杯全国大学生数学建模竞赛D题目 题目描述 储药柜的结构类似于书橱&#xff0c;通常由若干个横向隔板和竖向隔板将储药柜分割成若干个储药槽(如图1所示)。为保证药品分拣的准确率&#xff0c;防止发药错误&#xff0c;一个储药槽内只能摆放同一种药品。药品在储药槽…

【网络版本计算器的实现】

本章重点 理解应用层的作用, 初识HTTP协议理解传输层的作用, 深入理解TCP的各项特性和机制对整个TCP/IP协议有系统的理解对TCP/IP协议体系下的其他重要协议和技术有一定的了解学会使用一些分析网络问题的工具和方法 ⭐注意!! 注意!! 注意!! 本课是网络编程的理论基础.是一个服务…

IT廉连看——UniApp——事件绑定

IT廉连看——UniApp——事件绑定 这是我们上节课最终的样式&#xff1b; 一、现在我有这样一个需求&#xff0c;当我点击“生在国旗下&#xff0c;长在春风里”它的颜色由红色变为蓝色&#xff0c;该怎么操作&#xff1f; 这时候我们需要一个事件的绑定&#xff0c;绑定一个单…

设计模式—23种设计模式重点 表格梳理

设计模式的核心在于提供了相关的问题的解决方案&#xff0c;使得人们可以更加简单方便的复用成功的设计和体系结构。 按照设计模式的目的可以分为三大类。创建型模式与对象的创建有关&#xff1b;结构型模式处理类或对象的组合&#xff1b;行为型模式对类或对象怎样交互和怎样…

pytorch-20_1 LSTM在股价数据集上的预测实战

LSTM在股价数据集上的预测实战 使用完整的JPX赛题数据&#xff0c;并向大家提供完整的lstm流程。 导包 import numpy as np #数据处理 import pandas as pd #数据处理 import matplotlib as mlp import matplotlib.pyplot as plt #绘图 from sklearn.preprocessing import M…

Unreal Engine5 Landscape地形材质无法显示加载

UE5系列文章目录 文章目录 UE5系列文章目录前言一、解决办法 前言 在使用ue5做地形编辑的时候&#xff0c;明明刚才就保存的Landscape地形完全消失不见&#xff0c;或者是地形的材质不见了。重新打开UE5发现有时候能解决&#xff0c;但大多数时候还是没有解决&#xff0c;我下…

有效的变位词

如果哈希表的键的取值范围是固定的&#xff0c;并且范围不是很大&#xff0c;则可以用数组来模拟哈希表。数组的下标和哈希表的键相对应&#xff0c;而数组的值和哈希表的值相对应。 英文小写字母只有26个&#xff0c;因此可以用一个数组来模拟哈希表。 class Solution {publi…

中国主要城市房价指数数据集(2011-2024)

数据来源&#xff1a;东方财富网 时间跨度&#xff1a;2011年1月 - 2024年4月 数据范围&#xff1a;中国主要城市 包含指标&#xff1a; 日期、城市 新建商品住宅价格指数-同比 新建商品住宅价格指数-环比 新建商品住宅价格指数-定基 二手住宅价格指数-环比 二手住宅价格指…

CS西电高悦计网课设——校园网设计

校园网设计 一&#xff0c;需求分析 所有主机可以访问外网 主机可以通过域名访问Web服务器 为网络配置静态或者动态路由 图书馆主机通过DHCP自动获取IP参数 为办公楼划分VLAN 为所有设备分配合适的IP地址和子网掩码&#xff0c;IP地址的第二个字节使用学号的后两位。 二…

学习平台|基于Springboot+vue的学习平台系统的设计与实现(源码+数据库+文档)

学习平台系统 目录 基于Springboot&#xff0b;vue的学习平台系统的设计与实现 一、前言 二、系统设计 三、系统功能设计 1系统功能模块 2管理员功能模块 3学生功能模块 4教师功能模块 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八…

基于STM32实现智能风扇控制系统

目录 文章主题环境准备智能风扇控制系统基础代码示例&#xff1a;实现智能风扇控制系统 PWM控制风扇速度温度传感器数据读取串口通信控制应用场景&#xff1a;智能家居与环境调节问题解决方案与优化收尾与总结 1. 文章主题与命名 文章主题 本教程将详细介绍如何在STM32嵌入式…

layui扩展件(xm-select)实现下拉框

layui扩展件&#xff08;xm-select&#xff09;实现下拉框 扩展组件 xm-select 效果图 html代码 <div class"layui-inline"><label class"layui-form-label">职位</label><div class"layui-input-inline" style"wid…

你以为的私域是真正的私域嘛??你的私域流量真的属于你嘛?

大家好 我是一个软件开发公司的产品经理 专注私域电商行业7年有余 您的私域流量是真正的属于你自己嘛&#xff1f; 私域的定义 私域的界定&#xff1a;一个互联网私有数据&#xff08;资产&#xff09;积蓄的载体。这个载体的数据权益私有&#xff0c;且具备用户规则制定权…