TS中的泛型精简(快速掌握)

前言

泛型是保证类型安全的前提下，让函数等与多种类型一起工作，实现类型的复用，常用于：函数、接口、class 中；泛型在保证类型安全(不丢失类型信息)的同时，可以让函数等与多种不同的类型一起工作，灵活可复用；实际上，在 C# 和 Java 等编程语言中，泛型都是用来实现可复用组件功能的主要工具之一，下面我将带大家学习泛型；

🥇 一、创建、调用泛型函数

如下所示，创建泛型函数需要在函数名后加上<>,尖括号内部的变量名可以自定义，调用泛型函数是在函数名后加上<>,并且接括号内部注明具体的类型；当然调用时<>内的类型也可以简化不写，调用时TS内部会自动推断出Type的类型，当编译器无法推断类型或者推断的类型不准确时，就需要显式地传入类型参数；

//创建
function fn<Type>(value: Type) {
	return value: Type
}
//调用
fn<string>('a')
//简化调用
fn('a')

🥇 二、泛型约束

在泛型的实践中可能存在一种情况，即使用了泛型，但是想对泛型进行一定的约束，缩小泛型的范围；收缩类型的方式有两种：1 指定更加具体的类型 2 添加约束

🥈 2.1 指定更加具体的类型

如下所示在创建泛型函数时，可以给函数接收的参数和返回的值定义为Type类型的数组，即缩小了泛型的范围；

const fn<Type> = (values: Type[]): Type[] => {
	return values
}

🥈 2.2 添加约束

如下所示，Type 使用 extends 关键字继承了 ILength 接口的类型，即传入的类型必须有 length 属性；

// 创建一个接口
interface ILength { length: number }
const fn<Type extends ILength> = (values: Type): Type => {
	return values
}

🥈 2.3 多个变量类型的约束

如下所示，泛型变量可以有多个，并且 Key 变受量 Type 变量的约束，keyof实际上是获取person对象中的键值的联合类型即：‘name’ | ‘age’;

const fn<Type , Key extends keyof Type > = (obj: Type, key: Key) => {
return obj[key]
}
let person = { name: 'jack', age: 18 }
getProp(person, 'name')

🥇 三、泛型接口

接口也可以配合泛型使用，可以提高泛型的可复用性；如下所示，在接口名称的后面添加 <类型变量>，那么，这个接口就变成了泛型接口。

interface IPerson<Type> {
	name: string,
	age: number,
	id: (value: Type) => Type
}
let person: IPerson<number> = {
	name: '张三',
	age: 18,
	id: (value) => value
}

🥇 四、泛型工具类型

🥈 4.1 Partial

Partial 用来构造(创建)一个类型，将 Type 的所有属性设置为可选。

type Props =  {
  id: string
  children: number[]
}
type PartialProps = Partial<Props>

🥈 4.2 Readonly

Readonly 用来构造一个类型，将 Type 的所有属性都设置为 readonly(只读)。如下ReadonlyProps 定义的变量只能读不能写；

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

🥈 4.3 Pick

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

interface Props {
  id: string
  title: string
  children: number[]
}
type PickProps = Pick<Props, 'id' | 'title'>

🥈 4.4 Omit

Omit<K,T>类型让我们可以从另一个对象类型中剔除某些属性，并创建一个新的对象类型：
K：是对象类型名称，T：是剔除K类型中的属性名称

🥇 写在最后

泛型是TS语言经常使用的一种高级类型，其对于在保证类型安全的前提下，实现类型的复用，起到了举足轻重的作用，大家一定要认真学习；

🥂(❁´◡`❁)您的点赞👍➕评论📝➕收藏⭐是作者创作的最大动力🤞