当前位置: 首页 > news >正文

TypeScript 泛型的概念和基本使用

什么是TypeScript 泛型?

  • 在定义函数,接口,类的时候不能预先确定使用的数据类型,而是在调用使用这些函数,接口,类的时候才能确定的数据类型;

1,单个泛型的参数

例如通过使用any这种方式,value1的类型随着传入的类型数据而变化:

function myfunction01(value1: any, value2: number): any[]{let arr: any[] = [value1, value2]return arr
}
myfunction01('123456', 111);
myfunction01(123456, 111);

改为泛型之后:

function myfunction01<T>(value1: T, value2: T): T[]{// let arr: T[] = [value1, value2]let arr: Array<T> = [value1, value2]return arr
}
myfunction01<string>('123456', '1111');
myfunction01<number>(123456, 111);

2,多个泛型的参数

function myfunction01<T, X>(value1: T, value2: X): [T, X]{return [value1, value2]
}
myfunction01<string, number>('123456', 1111);

3,泛型接口

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

interface 接口名<类型变量1,类型变量2> {变量:类型变量1,变量:类型变量2
}

使用:

interface MyArray<T> {length: T,data:string[]push(n: T): T,pop(): void,reverse(): T[]
}
const obj: MyArray<number> = {length: 11,push (o){ return o },pop: function () {},reverse: () => [1, 2],data: ['1', '1']
}
  1. 在接口名称的后面添加 <类型变量>,那么,这个接口就变成了泛型接口。
  2. 接口的类型变量,对接口中所有其他成员可见,也就是接口中所有成员都可以使用类型变量。
  3. 使用泛型接口时,需要显式指定具体的类型。

4,泛型工具类型

泛型工具类型:TS 内置了一些常用的工具类型,来简化 TS 中的一些常见操作

说明:它们都是基于泛型实现的(泛型适用于多种类型,更加通用),并且是内置的,可以直接在代码中使用。 这些工具类型有很多,先来学习以下3个:

① Partial

将一个对象类型中的所有属性变为可选属性;

type User = {id: number;name: string;age: number;
}
type UpdatedPerson = Partial<User>;

得到的 UpdatedPerson 类型与下面的类型定义是相同的:

type UpdatedPerson = {id?: number;name?: string;age?: number;
}

② Readonly

将Type 所有属性都设置为 readonly(只读)。

type Props =  {id: stringchildren: number[]
}
type ReadonlyProps = Readonly<Props>

构造出来的新类型 ReadonlyProps 结构和 Props 相同,但所有属性都变为只读的。不可修改

③ Pick

Pick<Type, Keys> 从 Type 中选择一组属性来构造新类型。

type Props = {id: stringtitle: stringchildren: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>
  1. Pick 工具类型有两个类型参数:1 表示选择谁的属性 2 表示选择哪几个属性。 2. 其中第二个类型变量,如果只选择一个则只传入该属性名即可。
  2. 第二个类型变量传入的属性只能是第一个类型变量中存在的属性。
  3. 构造出来的新类型 PickProps,只有 id 和 title 两个属性类型。
http://www.lryc.cn/news/115728.html

相关文章:

  • redis的事务和watch机制
  • objectMapper.getTypeFactory().constructParametricType 方法的作用和使用
  • 【websocket - Tornado】简易聊天应用
  • TCP 三次握手,四次挥手
  • Nginx之Rewrite重定向
  • uni-app微信小程序开发自定义select下拉多选内容篇
  • VUE+view table.exportCsv()导出.csv文档时如何防止数据格式为科学计数
  • Java基础练习六(排序)
  • 【Go】Go数据操作 - 处理JSON文件
  • 服务器之LNMP
  • 恒运资本:定向增发一般多久完成?
  • mysql进阶篇(二)
  • 考研C语言进阶题库——更新31-32题
  • 机动车号牌正则表达式(兼容新能源车牌)
  • idea如何上传项目到github(超详细)
  • 护网专题简单介绍
  • GO学习之 网络通信(Net/Http)
  • <dependency> idea中为什么这个变黄色
  • SA8000 社会责任要求之健康安全准则
  • SpringMVC的架构有什么优势?——控制器(三)
  • AI和ChatGPT:人工智能的奇迹
  • 掌握 JVM 的参数及配置
  • 如何高性能、高效率地实现3D Web轻量化?
  • 【Linux 网络】 传输层协议之TCP协议 TCP的三次握手和四次挥手
  • git仓库与本地暂存区的同步问题
  • MATLAB算法实战应用案例精讲-【图像处理】图像分类模型-LeNetAlexNetVGG
  • ArcGIS API for JavaScript 4.x 教程(二)切换基础地图图层
  • SpringBoot——如何读写使用JSON文件保存的数据
  • SDU Crypto School - 计算不可区分性1
  • win11 vscode torch 编译遇错