TypeScript中泛型对象、泛型类

一. 概览

本文详细介绍泛型中泛型对象和泛型类的使用,结合实际应用场景,加深对泛型的理解、使用。

二. 泛型对象

举个例子

const test = {a: 1,b: 1
}

一个类型有没有一种可能让我么在定义的时候传入一个类似于变量的形参,在使用的时候传入具体的类型参数。在定义前不知道具体的参数类型

当然我们也可以定义为any,但是和没有限制差别不大

引入泛型对象

interface ITest<T> {id: Number,content: T,completed: boolean
}const test:ITest<string> = {id: 1,content: '',completed: true
}

泛型实参会限制泛型形参变量的类型

作为函数的形参和实参

function createTodo<T>({id,content,completed
}: ITest<T>) {return {id,content,completed}
}const todo1 = createTodo<string[]>({id:2, content: ['唱','跳','rap'],completed:true})

三. 泛型类

在class中,所以属性都应该是私有的,如果需要获取属性,设置属性都应该由公共的getter setter方法去完成。
完整代码


interface ITodoProps<T> {id: number,content: T;completed: boolean
}interface ITodo<T> {get(): ITodoProps<T>,create():string
}class Todo<T> implements ITodo<T>{private id: number;private content: T;private completed: boolean;constructor(id: number, content: T, completed: boolean) {this.id = id;this.content = content;this.completed = completed;}get(): ITodoProps<T> {return {id: this.id,content: this.content,completed: this.completed}}create(): string {if (typeof this.content === "string") {return this.createStringContent(this.content);} else if (Array.isArray(this.content) && typeof this.content[0] === "string") {return this.createArrayContent(this.content as string[]);} else {return this.createObjectContent(this.content);}}private createStringContent(content: string): string {return content}private  createArrayContent(content: string[]): string {return content.join(',')}private createObjectContent(content: T): string {let _content = '';for (let key in content) {let _content = "";_content += `${key}: ${content[key]}`}return _content}
}const todo11 = new Todo<string[]>(2,['逛街','打球','看电影'],false)const todo12= new Todo<{[key:string]:number}>(3, {sleep:1,walking:2,study:3},false)const todoString111 =todo11.create()const todoString112=todo12.create()const todoList = [todoString111,todoString112]const todo1 = todo11.get()const todo2 = todo12.get()function getTodoProp<T, K extends keyof T>(todo: T,key: K) {return todo[key]}getTodoProp(todo1,'id')

可以结合例子,去看泛型类的使用

keyof的使用

 function getTodoProp<T, K extends keyof T>(todo: T,key: K) {return todo[key]}getTodoProp(todo1,'id')

疑问:getTodoProp(todo1,‘id’)为什么可以编译成功,不需要传T的具体类型吗?

解答:

  1. getTodoProp 函数使用了泛型和 TypeScript 的索引类型查询,可以在不使用 T 类型的情况下获取 todo 对象上的 key 属性对应的值。
  2. 在函数定义中,泛型类型参数 T 表示传入的 todo 参数的类型,而泛型类型参数 K 是具有约束条件 extends keyof T 的索引类型查询,表示必须是 T 对象的属性名之一。

当我们在调用 getTodoProp 函数时,传入了一个 todo1 对象作为 todo 参数,而 TypeScript 会根据该对象的类型自动推断 T 类型为:
{
id: number;
content: string;
}

在 getTodoProp(todo1, ‘id’) 调用中,K 类型被推断为 ‘id’,因此 key 参数的类型为 ‘id’,这个类型也符合泛型类型参数 K 的约束条件。

类似地

function getSplitValue3<E>(value: E[],type: string):string {return value.join(type)
}const aa = getSplitValue3<string>(['a','b','c'],',')
const bb = getSplitValue3<number>([1,2,3],',')

可以省略为

function getSplitValue3<E>(value: E[],type: string):string {return value.join(type)
}const aa = getSplitValue3(['a','b','c'],',')
const bb = getSplitValue3([1,2,3],',')

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

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

相关文章

Jtti:香港云服务器如何实现远程连接?

云服务器具有灵活扩展、高可用性、易于管理和数据安全等优点&#xff0c;因此被广泛应用于各种业务场景。然而&#xff0c;对于初次使用云服务器的用户来说&#xff0c;如何实现远程连接可能是一个难题。本文将详细介绍云服务器实现远程连接的步骤和注意事项&#xff0c;帮助用…

教你pycharm运行Django第一个项目

文章目录 前言搭建Django:1.新建Django项目&#xff1a;2.为Django项目指定远程中创建的虚拟环境下的python解释器&#xff1a;3.配置ubuntu的端口转发&#xff08;添加端口号为1234的端口&#xff09;&#xff1a;关于Python技术储备一、Python所有方向的学习路线二、Python基…

循环单向链表与约瑟夫问题

循环链表介绍 先不急着看约瑟夫问题是什么&#xff0c;先了解循环链表的结构&#xff0c;那什么是循环链表&#xff1f; 循环&#xff0c;顾名思义&#xff0c;从链表中第一个节点出发&#xff0c;还会遇到第一个节点&#xff0c;形成循环的一环。也就是说链表中最后一个节点…

python 使用 watchdog 实现类似 Linux 中 tail -f 的功能

一、代码实现 import logging import os import threading import timefrom watchdog.events import FileSystemEventHandler from watchdog.observers import Observerlogger logging.getLogger(__name__)class LogWatcher(FileSystemEventHandler):def __init__(self, log_…

《opencv实用探索·十五》inRange二值化图像

opencv接口如下&#xff1a; void inRange(InputArray src, InputArray lowerb, InputArray upperb, OutputArray dst);函数实现二值化功能&#xff0c;主要是将在两个阈值内的像素值设置为白色&#xff08;255&#xff09;&#xff0c;而不在阈值区间内的像素值设置为黑色&am…

一篇文章带你快速入门 Nuxt.js 服务端渲染

1. Nuxt.js 概述 1.1 我们一起做过的SPA SPA&#xff08;single page web application&#xff09;单页 Web 应用&#xff0c;Web 不再是一张张页面&#xff0c;而是一个整体的应用&#xff0c;一个由路由系统、数据系统、页面&#xff08;组件&#xff09;系统等等&#xff0…

什么是HTTPS加密协议?HTTPS安全传输原理,SSL和TLS介绍,NGINX如何配置SSL证书

HTTPS介绍 HTTPS是超文本传输协议&#xff08;HTTP&#xff09;的安全版本。它使用SSL&#xff08;安全套接层&#xff09;或TLS&#xff08;传输层安全&#xff09;加密协议来保护数据传输的安全性和机密性&#xff0c;以防止未经授权的访问和窃听。HTTPS协议通常用于处理敏感…

HbuilderX使用Uniapp+Vue3安装uview-plus

如果你是vue2版本想使用uniapp去配置uviewui库可以参考之前的文章 小程序的第三方ui库推荐较多的还是uview的&#xff0c;看起来比较美观&#xff0c;功能也比较完善&#xff0c;下面将提一下Vue3安装uview-plus库的教程 创建项目 安装 首先进入官网 uView-Plus 直接下载并导…

预训练--微调

预训练–微调 一个很简单的道理&#xff0c;如果我们的模型是再ImageNet下训练的&#xff0c;那么这个模型一定是会比较复杂的&#xff0c;意思就是这个模型可以识别到很多种类别的即泛化能力很强&#xff0c;但是如果要它精确的识别是否某种类别&#xff0c;它的表现可能就不…

07-2 Python模块和命名空间

1. 模块 概念&#xff1a;其实就是一个Python文件&#xff0c;正常文件有的变量&#xff0c;函数&#xff0c;类&#xff0c;模块都有 功能:模块可以被其它程序引入&#xff0c;以使用该模块中的函数等功能。 示例&#xff1a;test-module.py调用mymodule.py模块中的now_time…

充电桩IC

充电桩IC 电子元器件百科 文章目录 充电桩IC前言一、充电桩IC是什么二、充电桩IC的类别三、充电桩IC的应用实例四、充电桩IC的工作原理总结前言 充电桩IC的设计和功能会根据不同的充电协议和市场需求进行调整和定制。目前市场上有许多不同型号和厂家的充电桩IC可供选择,以满足…

一篇文章带你快速入门 Vue 核心语法

一篇文章带你快速入门 Vue 核心语法 一、为什么要学习Vue 1.前端必备技能 2.岗位多&#xff0c;绝大互联网公司都在使用Vue 3.提高开发效率 4.高薪必备技能&#xff08;Vue2Vue3&#xff09; 二、什么是Vue 概念&#xff1a;Vue (读音 /vjuː/&#xff0c;类似于 view) …

Mysql 日期函数大全

一、时间函数 &#xff08;一&#xff09;、获取当前时间 1、NOW() 获取当前日期和时间&#xff0c;在程序一开始执行便拿到时间 返回格式 YYYY-MM-DD hh:mm:ss eg&#xff1a; NOW() 得到 2023-12-03 12:20:02 NOW(),SLEEP(2),NOW() 得到 2023-12-03 12:20:02 | 0 | 2023-…

目标检测——OverFeat算法解读

论文&#xff1a;OverFeat: Integrated Recognition, Localization and Detection using Convolutional Networks 作者&#xff1a;Pierre Sermanet, David Eigen, Xiang Zhang, Michael Mathieu, Rob Fergus, Yann LeCun 链接&#xff1a;https://arxiv.org/abs/1312.6229 文章…

Go语言-让我印象深刻的13个特性

我们正在加速进入云原生时代&#xff0c;Go语言作为云原生的一块基石&#xff0c;确有它的独到之处。本文介绍Go语言的几个让我印象深刻的特性。 1、兼顾开发效率和性能 Go语言兼顾开发效率和性能。可以像Python那样有很快的开发速度&#xff0c;也可以像C那样有很快的执行速…

SpringAOP专栏二《原理篇》

上一篇SpringAOP专栏一《使用教程篇》-CSDN博客介绍了SpringAop如何使用&#xff0c;这一篇文章就会介绍Spring AOP 的底层实现原理&#xff0c;并通过源代码解析来详细阐述其实现过程。 前言 Spring AOP 的实现原理是基于动态代理和字节码操作的。不了解动态代理和字节码操作…

【C语言】函数递归详解(一)

目录 1.什么是递归&#xff1a; 1.1递归的思想&#xff1a; 1.2递归的限制条件&#xff1a; 2.递归举例&#xff1a; 2.1举例1&#xff1a;求n的阶乘&#xff1a; 2.1.1 分析和代码实现&#xff1a; 2.1.2图示递归过程&#xff1a; 2.2举例2&#xff1a;顺序打印一个整数的…

机器学习---集成学习的初步理解

1. 集成学习 集成学习(ensemble learning)是现在非常火爆的机器学习方法。它本身不是一个单独的机器学 习算法&#xff0c;而是通过构建并结合多个机器学习器来完成学习任务。也就是我们常说的“博采众长”。集 成学习可以用于分类问题集成&#xff0c;回归问题集成&#xff…

多线程并发Ping脚本

1. 前言 最近需要ping地址&#xff0c;还是挺多的&#xff0c;就使用python搞一个ping脚本&#xff0c;记录一下&#xff0c;以免丢失了。 2. 脚本介绍 首先检查是否存在True.txt或False.txt文件&#xff0c;并在用户确认后进行删除&#xff0c;然后从IP.txt的文件中读取IP地…

CSS——sticky定位

1. 大白话解释sticky定位 粘性定位通俗来说&#xff0c;它就是相对定位relative和固定定位fixed的结合体&#xff0c;它的触发过程分为三个阶段 在最近可滚动容器没有触发滑动之前&#xff0c;sticky盒子的表现为相对定位relative【第一阶段】&#xff0c; 但当最近可滚动容…