泛型

在保证类型安全的前提下，让函数等与多种类型一起工作，从而实现服用，常用于：函数、接口、class中

简单例子

需要一个函数，实现传入什么数据就返回该数据本身，即参数和返回值类型相同

 function fn<T>(value: T): T { 
    console.log(value) return value } type obj = { 
    name: string age?: number } fn<obj>({ 
    name: 'zyy' }) 

语法

在函数名称后面添加<> 里面添加类型变量
类型变量：是一种特殊类型的变量，是处理类型的，而不是值
类型变量相当于一个类型容器，能够捕获用户提供的类型，至于具体是什么类型由用户调用该函数时指定

讯享网 fn(1) // 上述代码 可以省略<类型> 会采用类型推断 // 当编译其无法推断或者推断不准确时，还是需要显式的传入 

泛型约束

泛型可以代表多个类型，导致无法访问任何属性
例如length属性，number就没有length
所以需要为泛型添加约束来收缩类型(缩窄类型取值范围)

1. 指定更加具体的类型

 function fn2<T>(value: T[]): T[] { 
    console.log(value.length) return value } fn2([1,'4']) //fn2<string | number> fn2([1]) //fn2<number> 

2. 添加约束

讯享网 interface Ilength { 
    length: number } // extends不是继承的意思了，表示前面要满足后面的要求 function fn3<T extends Ilength>(value: T): T { 
    console.log(value.length) return value } 

创建约束的接口Ilength，要求提供length属性
通过 extends 关键字使用该接口 为泛型添加约束
表示 传入的类型必须具有length属性

注 ： 传入的实参只要有length属即可，符合接口的类型兼容性

泛型的类型变量可以有多个，并且类型变量之间还可以约束(第二个类型变量受第一个类型变量约束)

例子

创建一个函数还获取对象中属性的值，第一个参数对象，第二个参数对象中的key

讯享网

 function getProp<Type, Key extends keyof Type>(obj: Type, key: Key) { 
    return obj[key] } let props = { 
    name: '111', age: 12 } console.log(getProp(props, 'name')) // 111 console.log(getProp(18, 'toFixed')) // [Function: toFixed] console.log(getProp('sad', 'replace')) //[Function: replace] console.log(getProp('sad', 1)) //a 

keyof 关键字 接收一个对象类型，生成其键名称(可能是字符串或数字-(数组字符串的索引))d的联合类型
getProp的第二个参数只能是props对象中的键中的任何一个key name | age
也可以传入数值类型的索引

泛型接口

接口名称后添加<类型变量>
接口中所有成员都可以使用类型变量
使用泛型接口时，必须显示指定具体的类型 因为接口没有类型推断

讯享网 interface funIn<Type> { 
    getID: (value: Type) => Type } let obj: funIn<number> = { 
    getID: value => value } console.log(obj.getID(123)) // let arr = [1, 2, 3, 4, 5, 6] // arr.forEach() 

泛型类

类似于泛型接口，在class名称后面添加<类型变量>，这个类就变成泛型类

 interface K { 
    toString(): string } class cls1<Type extends K> { 
    constructor(value: Type) { 
    this.defaultValue = value } defaultValue: Type // add: (x: Type, y: Type) => Type //如果要实现就加上=具体实现方式 } // const myNum = new cls1<number>(100) // 如果泛型类中有构造函数，并且这个构造函数中使用了泛型，那么根据类型推断可以不传入类型 const myNum = new cls1(100) console.log(myNum.defaultValue) 

泛型工具类型

1. Partial

讯享网 interface props1 { 
    name: string age: number } type parProps1 = Partial<props1> let p1: props1 = { 
    name: '111', age: 111, } // 全部变为可选 那么可不传 let pp1: parProps1 = { 
   } 

2. Partial

 interface props2 { 
    id: string children: number[] } type ReadonlyProps2 = Readonly<props2> let rp2: ReadonlyProps2 = { 
    id: '123', children: [1, 2, 3] } // rp2.id = '' //无法分配到 "id" ，因为它是只读属性。 

3. Pick

Pick<Type,Keys>
从Type中选择一组属性类构造新类型
Keys 多个用|隔开 ‘id’|‘name’

讯享网 interface props3 { 
    id: string title: string chidlren: number[] } type PickProps = Pick<props3, 'id' | 'title'> let pps2: PickProps = { 
    id: '', title: 'ssssss' } 

4. Recond

Recond : n./v. 记录
Recond<keys,Type>构造一个对象类型，属性键为Keys，属性类型为Type
Keys表示对象有哪些属性，Type表示对象属性的类型
注：适用于多个属性类型都一致的情况

 type RecordObj = Record<'a' | 'b' | 'c', number[]> let ro1: RecordObj = { 
    a: [1, 2, 3, 4], b: [1, 2, 3, 4], c: [1, 2, 3, 4], }