TS高级类型-泛型

泛型是保证类型安全前提下，能让函数与多种类型一起工作，从而复用。

function id(value:number):number{return value}

//泛型语法

function id<Type>(value:Type):Type{return value}


const num=id<number>(10)

const str=id<string>("abc")

简化（利用类型推断）

//泛型语法

function id<Type>(value:Type):Type{return value}


const num=id(10)

const str=id("abc")

泛型约束

1.指定更加具体的类型

//泛型语法

function id<Type>(value:Type):Type{
console.log(value.length)//报错
return value

}

const num=id(10)

指定更加具体的类型

function id<Type>(value:Type[]):Type[]{
console.log(value.length)
return value

}

2.添加约束  (<Type extends ILength>),extends在这里是约束的意思，需要满足接口。

//泛型语法

function id<Type>(value:Type):Type{
console.log(value.length)//报错
return value

}

const num=id(10)

添加约束(extends)
interface ILength {length:number }

function id<Type extends ILength>(value:Type):Type{
console.log(value.length)
return value

}

3.变量之间的约束：新增 keyof 关键字，接受一个对象类型，生成其键名称（可能是数字或字符串）的联合类型。下面的含义就是，第二个参数需要满足第一个对象参数类型的条件。

function id<Type,Key extends keyof Type >(value:Type,key:Key ){

return value[key]

}

id({name:'abc',age:12},'hhh')
id({name:'abc',age:12},1000)

id('abc','split')
id('abc',1) //abc[1]

4.泛型接口

接口后面添加类型变量就叫泛型接口

接口中所有成员都可以使用类型变量

使用泛型接口时，需要显式指定具体的类型（IdFunc<number>）

interface IdFunc <Type>{
id：(value:Type)=>Type,
ids:()=>Type[],
}

let obj:IdFunc<number>={
id(value){
return value
},
ids(){return [1,2,3]},
}

 泛型类

class Gener<NumType> {

value:NumType

add:(x:NumType,y:NumType)=>NumType

}

const myNum=Gener<number>()

泛型工具类

Partoal<Type>:用来构造一个类型，将Type的所有属性设置为可选

interface Props {
id:string
age:number
}
type PartialProps = Partial<Props>  //变成可选

Peadonly<Type>:用来构造一个类型，将Type的所有属性都设置为radonly（只读）

interface Props {
id:string
age:number
}
type ReadonlyProps = Readonly<Props>  //变成只读

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

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

表示
type PickProps = {
id:string;
age:number;
}

Rrcord<Keys,Type>:构造一个对象类型，属性键为Keys，属性类型为Type

type RecordObj = Record<'id'|'name',string>

表示

type RecordObj ={
id:string
name:string
}