做网站点击率赚钱吗,小组做数据库网站,个人网站 平台,綦江建设银行网站2024年了相信大家都已经在日常开发的过程中使用上了 TypeScript 了。TypeScript 增强了代码可靠性和可维护性#xff0c;确保减少运行时错误并提高开发人员的工作效率。
TypeScript 通过类型声明 使得 javascript 拥有了强类型校验。而泛型的是类型声明中最重要的一环#x…2024年了相信大家都已经在日常开发的过程中使用上了 TypeScript 了。TypeScript 增强了代码可靠性和可维护性确保减少运行时错误并提高开发人员的工作效率。
TypeScript 通过类型声明 使得 javascript 拥有了强类型校验。而泛型的是类型声明中最重要的一环通过运用 泛型 可以让我们更好地扩展类型声明。
今天我们来分析一下 TypeScript 泛型。
什么是泛型
我们先来看一下真实的仓库里面写的一个泛型带来的压迫感吧hhhh 第一眼看上去感觉东西很多不知道从哪里看过来 说回来泛型简单来说Generics是一种可以使类、接口和函数能够处理不同类型的方式而不需要明确指定具体的类型。
在 TypeScript 中泛型通过在类、接口和函数的声明中引入类型变量来实现。
这里我们可以看一个函数定义泛型的示例 红色的方框定义的泛型类型 SomeType 黄色的方框使用泛型SomeType来约束函数的参数是 SomeType类型数组 绿色的方框约束函数的返回值为 泛型 SomeType 本身 需要注意的是泛型本身不是 TypeScript 类型而是类型参数即调用函数时将指定的类型的占位符。
对于泛型的命名可以将其命名为任何您想要的名称只要它不是保留关键字例如 const、enum或已导入的类型名称。一般我们经常使用单个字母来表示泛型例如 T。
其实可以简单理解为 泛型 是一种 类型的占位
定义泛型
函数参数的泛型定义 在函数中使用泛型常用于约束函数参数的类型。需要注意的是函数参数的泛型定义和调用都是定义在函数参数列表的括号前
我们还可以定义多个泛型只要通过 , 进行分隔就行 接口 Interface 的泛型定义
接口的泛型定义的位置是紧跟在接口名称后面 当泛型在使用的时候指定了具体的类型之后我们就不能违背这个类型否则会触发 TypeScript 编译错误的提示 类型别名 type 的泛型定义
同样的类型别名也可以通过定义泛型来扩大自己的类型声明范围。类型别名定义泛型的位置和接口 Interface 定义的方式是一致的 类 Class 的泛型定义
类定义泛型是在 类名 后面如果是匿名类的话就是直接定义在 class 后面。 泛型的约束
泛型通过 extend 关键字实现泛型的约束就是在一些场景下你知道这个泛型的类型不确定但是你知道这个类型一定有一些固定的属性或者一定是属于某一个基础类型这时候我们可以使用泛型约束确保传递的参数一定具有某个属性或者属于某一种类型这样就能安全地在 函数体内执行相关的属性或方法 如果我们传递的类型不满足约束条件时 TS 就会在运行的阶段会提示我们这样可以避免我们产生后续的 bug 泛型的默认类型
泛型的默认类型和参数的默认类型一样也是通过 来声明一个泛型的默认类型 使用默认类型可以让我们在调用的时候如果不传递类型给泛型泛型也能获取到默认类型应用到具体的变量约束上。
infer 在泛型中的应用
在泛型中我们经常会使用 infer 对泛型做进一步的类型推定, 进一步将范围进行缩小推断到我们想要的类型。
这里我们可以看一下 内置的 ReturnType 的实现 在这个示例中ReturnType 是一个条件类型它检查类型 T 是否符合函数类型 (...args: any[]) infer R。如果 T 是一个函数类型TypeScript 会推断出函数的返回类型 R。 infer 目前只能在 extends 的条件语句中 内置的泛型工具函数
TS 内置了很多工具函数具体可以查看官方文档关于Utility Types 部分
Partial
将类型 T 的所有属性变为可选属性。 keyof T 获取类型 T 的所有属性名。[P in keyof T] 是一个映射类型它遍历 T 的所有属性名。T[P] 获取属性名 P 对应的属性类型。?: 将属性变为可选属性。
Required
将类型 T 的所有属性变为必选属性。 keyof T 获取类型 T 的所有属性名。[P in keyof T] 是一个映射类型它遍历 T 的所有属性名。T[P] 获取属性名 P 对应的属性类型。-? 移除可选属性修饰符 ?将属性变为必选属性。
Readonly
将类型 T 的所有属性变为只读属性。 keyof T 获取类型 T 的所有属性名。[P in keyof T] 是一个映射类型它遍历 T 的所有属性名。T[P] 获取属性名 P 对应的属性类型。readonly 将属性变为只读属性。
小结
泛型作为 ts 中重要的基石的存在学会了 泛型的使用可以让我们编写更加健壮且可维护的代码
如果这篇文章对你有帮助欢迎点赞、关注、转发
