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)


相关文章
|
5月前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
119 0
|
5月前
|
JavaScript 编译器
TypeScript中泛型在函数和类中的应用
【4月更文挑战第23天】TypeScript的泛型在函数和类中提供了灵活性,允许处理多种数据类型。了解泛型是掌握TypeScript类型系统的关键。
|
1月前
|
JavaScript 编译器
typescript之泛型
typescript之泛型
|
11天前
|
JavaScript 安全
typeScript进阶(14)_泛型和注意事项
TypeScript中的泛型允许创建可重用的代码。泛型可以定义函数、接口、类,支持传递类型参数,实现类型安全。泛型可以用于数组,约束类型参数必须符合特定的接口,也可以在接口和类中使用。泛型类可以包含多个类型参数,甚至在泛型约束中使用类型参数。
12 0
typeScript进阶(14)_泛型和注意事项
|
2月前
|
JavaScript 安全 算法
TypeScript:一个好泛型的价值
TypeScript:一个好泛型的价值
|
3月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
65 0
|
3月前
|
JavaScript 安全
TypeScript(十一)泛型工具类型
TypeScript(十一)泛型工具类型
32 0
|
3月前
|
JavaScript 前端开发 索引
TypeScript(十)泛型进阶
TypeScript(十)泛型进阶
23 0
|
3月前
|
JavaScript 开发者
TypeScript(九)泛型基础
TypeScript(九)泛型基础
20 0
|
4月前
|
JavaScript
TypeScript 泛型类型
TypeScript 泛型类型
下一篇
无影云桌面