免费资源部落

这篇文章主要介绍“TypeScript内置工具类型怎么使用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“TypeScript内置工具类型怎么使用”文章能帮助大家解决问题。

一、什么是ts内置工具类型

TypeScript 附带了大量类型，可以帮助进行一些常见的类型操作，通常称为 Utility Types。

二、使用示例1.Partial

将必填参数变为可选参数

namespacea{//示例一：interfaceA{name:string,age:number,sex:string}//接口A中的参数通过内置工具类型Partial变成了可选参数typePartialA=Partial<A>;leta:PartialA={//此处传参可以任意个数，但只能传已定义的参数name:'张三',age:10}//示例二：interfaceCompany{id:number,name:string}interfacePerson{id:number,name:string,company:Company}//实现DeepPartial，将参数深度转换成可选参数typeDeepPartial<T>={[UinkeyofT]?:T[U]extendsobject?DeepPartial<T[U]>:T[U];}typePartialPerson=DeepPartial<Person>;letp:PartialPerson={//此处的参数已经变为可选参数，可根据自己需要传递id:10,name:'张三',company:{name:'美团'}}}

Partial的实现源码

namespaceb{interfaceA{name:string,age:number,sex:string}typePartial<T>={//原理：//1.通过keyof拿到T中的所有key//2.迭代所有的key//3.统一加上可选参数处理//4.返回迭代值的类型[PinkeyofT]?:T[P];}//测试：typePartialA=Partial<A>;leta:PartialA={name:'张三',age:10}}2.Required

将所有参数变为必填

namespaceb{interfacePerson{name:string,age?:number}//Required将可选参数变为必填typeRequiredPerson=Required<Person>;letperson:RequiredPerson={name:'张三',age:10}}

Required 的实现源码

namespacec{interfacePerson{name:string,age?:number}typeRequired<T>={//原理：//1.通过keyof拿到T中所有的key//2.迭代所有的key//3.将可选的参数变为必填的参数//4.返回迭代属性及类型//+?或者?:代表的是可选，-?:代表的是不可选[PinkeyofT]-?:T[P];};//测试typeRequiredPerson=Required<Person>;letperson:RequiredPerson={name:'李四',age:18}}3.ReadOnly

将所有参数变为只读

namespaced{interfacePerson{name:string,age?:number}typeReadonlyPerson=Readonly<Person>;letperson:ReadonlyPerson={name:'张三',age:10}//已经变为只读属性，因此此处赋值会报错//person.name='李四';//无法分配到"name"，因为它是只读属性。ts(2540)//person.age=20;//无法分配到"age"，因为它是只读属性。ts(2540)}

Readonly 的实现源码

namespacee{interfacePerson{name:string,age?:number}typeReadonly<T>={//原理：//1.通过keyof拿到T中所有key//2.迭代拿到的所有key//3.通过readonly关键字将所有属性变为只读属性//4.返回迭代属性及类型readonly[PinkeyofT]:T[P]}//测试typeReadonlyPerson=Readonly<Person>;letperson:ReadonlyPerson={name:'张三',age:10}//person.name='李四';//无法分配到"name"，因为它是只读属性。ts(2540)//person.age=20;//无法分配到"age"，因为它是只读属性。ts(2540)}4.Pick

捡取符合条件的属性

namespaceg{interfacePerson{name:string,age:number,sex:string}//参数一是一个对象，参数二是要筛选的属性typePickPerson=Pick<Person,'name'|'sex'>;letperson:PickPerson={name:'张三',//由于通过Pick只捡取了name和sex属性，因此此时给sex赋值会报错//不能将类型“{name:string;age:number;sex:string;}”分配给类型“PickPerson”。//对象文字可以只指定已知属性，并且“age”不在类型“PickPerson”中。ts(2322)//age:10,sex:'男'}}

Pick 的实现源码

namespaceh{interfacePerson{name:string,age:number,sex:string}//原理：//1.T表示传入的类型定义。此处指Person接口。//2.K表示T的子类型，是一个联合类型。此处指'name'|'age'|'sex'的子类型//3.通过keyof拿到T中的所有key//3.迭代K，拿到所有传递进来的子类型//4.返回迭代属性及类型//简单理解：就是从一个对象中，提取一部分属性组成新的对象typePick<T,KextendskeyofT>={[PinK]:T[P];}//测试typePickPerson=Pick<Person,'name'|'age'>letperson:PickPerson={name:'张三',age:10}}5.Record

记录类型：将一个类型的所有属性值都映射到另一个属性上并创建新的类型

namespacei{//1.此处的K主要用来修饰obj对象的key，为string或者number//2.此处的T用来修饰老的类型//3.此处的U用来修饰新的类型functionmapObj<Kextendsstring|number,T,U>(obj:Record<K,T>,callable:(x:T)=>U){//声明一个变量letresult:Record<K,U>=<Record<K,U>>{};//遍历传入的对象for(constkeyinobj){//通过callback函数处理result的属性值result[key]=callable(obj[key]);}//返回resultreturnresult;}letobj={num1:1,num2:2};letcallable=(x:number):string=>x*2+'';letnewObj=mapObj<string|number,number,string>(obj,callable);console.log(newObj);//{num1:'2',num2:'4'}}

Record 的实现源码

namespacej{typeRecord<Kextendskeyofany,T>={//原理：//1.通过keyof拿到所有的K，是一个联合类型。string|number|symbol//2.迭代K，拿到所有的属性//3.返回迭代的属性及类型//注意：此处不能写成typeRecord<K,T>={};any代表所有key的联合类型。//否则会报错：不能将类型“K”分配给类型“string|number|symbol”。ts(2322)[PinK]:T;};//测试functionmapObj<Kextendsstring|number,T,U>(obj:Record<K,T>,callable:(x:T)=>U){//声明一个变量letresult:Record<K,U>=<Record<K,U>>{};//遍历传入的对象for(constkeyinobj){//通过callback函数处理result的属性值result[key]=callable(obj[key]);}//返回resultreturnresult;}letobj={num1:1,num2:2};letcallable=(x:number):string=>x*2+'';letnewObj=mapObj<string|number,number,string>(obj,callable);console.log(newObj);//{num1:'2',num2:'4'}}

关于“TypeScript内置工具类型怎么使用”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识，可以关注行业资讯频道，小编每天都会为大家更新不同的知识点。