介绍

软件设计中规范和灵活往往是相悖的，约束越多规范性越强反之灵活性越低。一款优秀的软件系统在这两者之间把握的一定很好。对于typescript而言，他给js上上了一道类型的加锁，如果说any是打开这把锁的钥匙那泛型同时也给了js类型一定的自主空间，就是我们常用的泛型。

• 泛型方便创建可重用的组件，一个组件可以支持多种类型的数据。
• 个人泛型和js变量相比既保留了js变量的灵活性又增加了变量的约束。

使用

泛型函数

• 泛型函数:在typescript用来实现函数的重用并且具有固定返回值类型和入参类型一致的能力，当我们想要输入的值类型和返回类型一致时可以使用

function getInputVal<T>(arg:T):T{
    console.log('arg: ', arg);
    return arg;
}
cons

泛型接口

• 当我们调用函数想要返回值有多重类型时，可以使用接口定义的泛型来实现，作用的话其实和泛型函数一样都是为了提高可重用性。

interface Identities<V,M>{
    value:V;
    message: M;
}
  
const getMultiInputVal = <T,U>(value:T,message:U):Identities<T,U>=>{
    let identies:Identities<T,U> = {
        value,
        message
    }
    return identies
}

泛型类

• 在类中使用泛型，可以帮助我们确认类的所有属性都在使用相同的类型。

class IdentitiesClass<T>{
    value:T;
    constructor(val:T){
        this.value = val
    }
    getIdentity(): T {
        return this.value
      }
}

泛型约束

• 在使用泛型时有时我们需要定义的类型都有同一个属性，此时结合接口来进行yue 注：对typescript中类型的定义，个人觉的可以分成这几个等级的约束（由高到底）： 指定类型=》联合类型 =》泛型约束 =》 泛型函数/接口/类 =》 泛型和联合类型组合=》 any，根据实际业务来使用typesript中类型定义也许刚开始会增加我们的开发时间但是长期来看不仅会使的我们的程序更为健壮也会缩短后期的维护成本。

// 泛型的约束: 定义我们传入的变量都具备length属性并且length属性都是number类型
interface LengthWise{
    length: number;
}

const identifyTypeWise =<T extends LengthWise>(arg:T):T=>{
    console.log('arg: ', arg);
    return arg
}
identifyTypeWise("test length") //字符串具备length，编译通过
identifyTypeWise(["test length"]) //数组具备length，编译通过
identifyTypeWise(3) //number类型不具备length，编译报错
// **.ts:58:18 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'LengthWise'.

常用的内置泛型

Partial

• Partial这个内置泛型是我最长用的一个，该工具类型能够构造一个新类型，并将实际类型参数T中的所有属性变为可选属性。

/**
 * @params 类型
 * @returns 新类型
 */
interface Student{
    name:string;
    weight: number;
    height: number;
    score: number;
}
const xmStu: Student = {
    name:"xm",
    weight: 133,
    height: 99,
    score: 122
}
type StudentPartial = Partial<Student>;

const xhStu:StudentPartial = {
    name: 'xh'
}

Required

• 该工具类型能够构造一个新类型，并将实际类型参数T中的所有属性变为必选属(与partial的作用相反)

/**
 * 内置的泛型处理函数-Required
 * 
 * @params 类型
 * @returns 新类型
 */
type StudentRequired = Required<StudentPartial>
const xjStu:StudentRequired = {
    name: 'xj'
}
//类型“{ name: string; }”缺少类型“Required<Partial<Student>>”中的以下属性: weight, height, score, phonets(2739)

[查看问题]()

[快速修复... (Ctrl+.)]()

\

Record<Keys， Type>构造一个对象类型，Keys 表示对象的属性键 、Type 表示对象的属性值，用于将一种类型属性映射到另一种类型

• 简单的限定键和值的类型
• 基于其他类型生成新的类型

type Obj1 = Record<string, string>
type FruitTypes = 'apple' | 'banana' | 'pear'
type FruitsWeight = Partial<Record<FruitTypes, number>>
const fruits: FruitsWeight = {
  apple: 3,
  banana: 3,
  pear: 2
}

注：这个跟接口定义的约束类似直接写法更方便，约束性更强

Pick<Type,Keys>:挑取，

• 该工具类型能够从已有对象类型中选取给定的属性及其类型，然后构建出一个新的对象类型，Pick<T, K>”工具类型中的类型参数T表示源对象类型，类型参数K提供了待选取的属性名类型，它必须为对象类型T中存在的属性。示例如下：

//接着Record的属性
type AppleWeight = Pick<FruitsWeight,'apple'>
const apple:AppleWeight = {
    apple:3
}

总结

学习新知识切勿死记硬背，应该学会从已有的知识中推导出新的知识，另外一定要把握好新知识能力对于自己当前的能力，循序渐进的去接触学习自己未掌握的知识。想要一口吃成个胖子是不现实的。