【Typescript重点】泛型的使用

简介: 【Typescript重点】泛型的使用

认识泛型


Typescript的泛型就是可以实现类型参数化。有人说那么使用any,使用any的时候,我们其实已经丢失了类型信息了。我们需要在这里使用一种特性的变量 - 类型变量(type variable),它作用于类型,而不是值。

微信图片_20221012164511.png

我们可以通过两种方式来调用它:


通过 <类型> 的方式将类型传递给函数;

通过类型推到,自动推到出我们传入变量的类型

function sum<Type>(num: Type): Type {
  return num
}
// 1.调用方式一: 明确的传入类型
sum<number>(20)
sum<{name: string}>({name: "why"})
sum<any[]>(["abc"])
// 2.调用方式二: 类型推导
sum(50)
sum("abc")

泛型的基本补充


我们在开发时可以传入多个类型。常用的名称有:

  • T:Type的缩写,类型
  • K、V:key和value的缩写,键值对
  • E:Element的缩写,元素
  • O:Object的缩写,对象

微信图片_20221012164608.png

泛型接口的使用


在定义接口的时候也可以使用泛型。

微信图片_20221012164637.png

泛型类

class Point<T> {
  x: T
  y: T
  z: T
  constructor(x: T, y: T, z: T) {
    this.x = x
    this.y = y
    this.z = y
  }
}
const p1 = new Point("1.33.2", "2.22.3", "4.22.1")
const p2 = new Point<string>("1.33.2", "2.22.3", "4.22.1")
const p3: Point<string> = new Point("1.33.2", "2.22.3", "4.22.1")

泛型的类型约束


有时候我们希望传入的类型有某些共性,但是这些共性可能不是在同一种类型中。比如string和array都是有length的,或者某些对象也是会有length属性的,这个时候我们就可以对类型做一个约束。使用extends 关键字。

微信图片_20221012164746.png

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