TypeScript 泛型的详细使用 <T, K, V>

简介: TypeScript 泛型的详细使用 <T, K, V>
  • 泛型 可以创建可重用的组件,一个组件可以支持多种类型,解决类、接口、方法的复用性,以及对不确定数据类型的使用。
  • 泛型字母可以自己随意指定,但是一个泛型字母在同一个函数中每次使用时只会代表一种数据类型。
  • 泛型的简单案例
// 定义一个函数,用于批量生成数字数组
function getArr1 (value: number, count: number): number[] {
  const arr: number[] = []
  for (let index = 0; index < count; index++) {
    arr.push(value)
  }
  return arr
}
// 调用生成数字数组
const arr1: number[] = getArr1(1, 10)
// 定义一个函数,用于批量生成字符串数组
function getArr2 (value: string, count: number): string[] {
  const arr: string[] = []
  for (let index = 0; index < count; index++) {
    arr.push(value)
  }
  return arr
}
// 调用生成字符串数组
const arr2: string[] = getArr2('1', 10)
  • 如果遇到上面这样的需求,那么就需要写多个方法来使用,下面通过泛型来进行实现
// 定义一个泛型函数
function getArr<T>(value: T, count: number): T[] {
  const arr: T[] = []
  for (let index = 0; index < count; index++) {
    arr.push(value)
  }
  return arr
}
// 调用生成数字数组
const arr3: number[] = getArr<number>(1, 10)
// 调用生成字符串数组
const arr4: string[] = getArr<string>('1', 10)
// 调用生成数字数组,不指定数据类型,默认会自动识传入的数据类型
const arr5: number[] = getArr(1, 10)
// 调用生成字符串数组,不指定数据类型,默认会自动识别传入的数据类型
const arr6: string[] = getArr('1', 10)
  • 多个泛型参数的使用
// 多个泛型参数
function getList<K, V>(key: K, value: V): [K, V] {
  return [key, value]
}
const list1 = getList<string, number>('dzm', 20)
const list2 = getList<number, number>(10, 20)
// 不传默认会自动识别传入的参数类型
const list3 = getList('dzm', 20)
const list4 = getList(10, 20)
// 多个泛型参数
function getList1<K, V>(key: K, value: V, key2: K, value2: V) {
  return [key, value, key2, value2]
}
const list5 = getList1<string, number>('dzm', 20, 'xyq', 20)
const list6 = getList1<number, number>(10, 20, 10, 20)
// 不指定类型,每个泛型默认会识别传入的第一个参数的数据类型,后面如果有同样的泛型都需要按照一样的数据类型进行传入,否者就会报错
// 比如第一个参数的泛型是 K,传入的第一个参数是 string, 那么后面 key2 的数据可以也必须是 string。
const list7 = getList1('dzm', 20, 'xyq', 20)
const list8 = getList1(10, 20, 10, 20)


相关文章
|
9月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
154 0
|
9月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
5月前
|
JavaScript 编译器
typescript之泛型
typescript之泛型
144 60
|
4月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
JavaScript 安全
typeScript进阶(14)_泛型和注意事项
TypeScript中的泛型允许创建可重用的代码。泛型可以定义函数、接口、类,支持传递类型参数,实现类型安全。泛型可以用于数组,约束类型参数必须符合特定的接口,也可以在接口和类中使用。泛型类可以包含多个类型参数,甚至在泛型约束中使用类型参数。
36 1
typeScript进阶(14)_泛型和注意事项
|
4月前
|
JavaScript 安全 前端开发
TypeScript :枚举&字符&泛型
本文介绍了 TypeScript 中的泛型、约束、枚举和字符操作的基本用法。通过示例代码展示了如何定义和使用泛型函数、类和接口,以及如何利用 `keyof` 约束类型。此外,还介绍了枚举的定义和使用,包括常量枚举和外部枚举的区别。最后,简要说明了 `?.` 和 `??` 操作符的用途,帮助处理可能为空的属性和提供默认值。
|
6月前
|
JavaScript 安全 算法
TypeScript:一个好泛型的价值
TypeScript:一个好泛型的价值
|
8月前
|
JavaScript
TypeScript 泛型类型
TypeScript 泛型类型
|
8月前
|
JavaScript Java 编译器
TypeScript 泛型
TypeScript 泛型
|
8月前
|
JavaScript 算法 开发者
16.【TypeScript 教程】TypeScript 泛型(Generic)
16.【TypeScript 教程】TypeScript 泛型(Generic)
77 2