当前位置: 首页 > 科技观察

ALearnTypeScriptUtilityTypes

时间:2023-03-12 11:37:54 科技观察

实用程序类型是Typescript附带的特殊类型,可用于提高代码的可读性和灵活性。简单的说,实用类型会根据提供的类型,按照规则构造一个新的类型。下面就来看看TypeScript中常用的几类工具以及如何使用吧!1.PartialPartial用于使传入的属性可选。当类型的结构不明确时很有用。它使用了两个关键字:keyof和in,先来看看它们是什么意思。keyof可以用来获取一个接口的所有键值:typePerson={name:string;年龄:数字;height:number;}typeT=keyofPerson//Ttypeis:"name"|“年龄”|"number"in关键字可以遍历枚举类型:typePerson="name"|“年龄”|"number"typeObj={[pinPerson]:any}//Obj的类型为:{name:any,age:any,number:any}keyof可以生成联合类型,in可以遍历枚举类型。所以它们可以一起使用,下面是Partial的定义:T[P];};这里用keyofT获取T的所有属性名,然后用in遍历,给P赋值,最后T[P]获取对应属性的值。这?中间的用于使属性可选。看下面的例子:typePerson={name:string;年龄:数字;height:number;}typePartialPerson=Partial;//PartialPerson的类型是{name?:string;年龄?:数字;高度?:number;}constperson:PartialPerson={name:"zhangsan";}这里使用partial来指定Person类型中的所有属性为可选属性。2、RequiredRequired的作用是使传入的属性成为强制性的,与上面的Partial刚好相反。它的声明如下:/***MakeallpropertiesinTinrequired*SetallpropertiesinTintomandatory*/typeRequired={[PinkeyofT]-?:T[P];};可以看出使用-?这里设置属性为mandatory,可以理解为减去问号。使用形式类似于上面的Partial:typePerson={name?:string;年龄?:数字;height?:number;}typeRequiredPerson=Required;//RequiredPerson的类型是{name:string;年龄:数字;height:number;}constperson:RequiredPerson={name:"张三";年龄:18;height:180;}这里,Required用于指定Person类型中的所有属性为必填属性。3.Readonly将类型T的所有属性设置为只读(readonly),构造类型的属性不能被重新赋值。Readonly的声明形式如下:/***使T中的所有属性只读*/typeReadonly={readonly[PinkeyofT]:T[P];};请参见以下示例:typePerson={name:string;年龄:数字;}类型ReadonlyPerson=Readonly;constperson:ReadonlyPerson={name:"zhangsan",age:18}person.age=20;//Error:cannotreassignareadonlyproperty可见原来Person的属性是通过Readonly转换为只读的,不能进行赋值。只读类型对于冻结对象很有用。4.Pick从Type类型中挑选一些属性Keys构造一个新的类型。它的声明形式如下:/***从T中挑选一组键在联合K中的属性*/typePick={[PinK]:T[P];};看下面的例子:typePerson={name:string;年龄:数字;height:number;}constperson:Pick={name:"zhangsan",age:18}这样通过Pick从Person类型中挑出name和age属性的类型,新类型只包含这两个属性。5、RecordRecord用于构造一个类型,属性名的类型为Keys中的类型,属性值的类型为Type。此工具类型可用于将某种类型的属性映射到另一种类型。下面是它的声明形式:/***构造一个类型,它具有类型T的一组属性K*/typeRecord={[PinK]:T;};看以下示例:typePageinfo={title:string;}typePage='home'|'关于'|'contact';constpage:Record={about:{title:'about'},contact:{title:'contact'},home:{title:'home'},}6.排除Exclude用于从类型Type中移除不在ExcludedUnion类型中的成员,下面是它的声明形式:/***ExcludefromTthosetypesthatareassignabletoU*/typeExclude=T扩展U?从不:T;请参阅以下示例:typePerson={name:string;年龄:数字;身高:数字;}常量人:排除<人,“年龄”|"性别">={姓名:"张三";height:180;}这里就用Exclude去掉Person类型中的age属性,只去掉两个参数中包含的属性。7.ExtractExtract用于从类型Type中提取成员,可以赋值给Union类型。效果与排除相反。下面是它的声明形式:/***从T中提取那些可分配给U的类型*/typeExtract=TextendsU?T:从不;看下面的例子:typeExtractedType=Extract<"x"|“是”|“z”,“x”|"y">;//"x"|"y"此工具类型对于查找两种类型的公共部分很有用:interfaceHuman{id:string;名称:字符串;姓氏:字符串;}接口猫{id:字符串;名称:字符串;声音:字符串;}//“ID”|“名称”类型CommonKeys=Extract;8.Omit上面的Pick和Exclude是最基本的工具类型。在许多情况下,使用Pick或Exclude可能不像直接编写类型那样直接。Omit是在这两者的基础上进行了更抽象的封装。它允许从一个对象中删除几个属性,剩下的就是需要的新类型。下面是它的声明形式:/***构造一个类型,除了类型K的属性外,还具有T的属性。*/typeOmit=Pick>;看下面的例子:typePerson={name:string;年龄:数字;height:number;}constperson:省略={name:"zhangsan";}只需使用Omit将Person类型中的age和height属性去掉,只留下name属性。9.ReturnTypeReturnType会返回函数返回值的类型,它的声明形式如下:/***获取一个函数类型的返回类型*/typeReturnTypeany>=Textends(...args:any)=>inferR?R:any;看下面的例子:functionfoo(type):boolean{returntype===0}typeFooType=ReturnType这里使用typeofis来获取foo的函数签名,相当于(type:任何)=>布尔值。10.InstanceTypeInstanceType返回Type构造器类型的实例类型。它的声明形式如下:/***获取构造函数类型的返回类型*/typeInstanceTypeany>=Textendsabstractnew(...args:any)=>推断R?R:any;看下面的例子:classPerson{name:string;年龄:数字;constructor(person:{name:string;age:number}){this.name=person.name;this.age=person.age;}}typePersonInstanceType=InstanceType;//PersonInstanceType的类型:{name:string;age:number}当然你也可以不这样写,因为你可以直接使用UserManagertype:classPerson{name:string;年龄:数字;constructor(person:{name:string;age:number}){this.name=person.name;this.age=person.age;}}constperson:Person={name:"zhangsan",age:18,};这等同于:classPerson{name:string;年龄:数字;constructor(person:{name:string;age:number}){this.name=person.name;this.age=person.age;}}typePersonInstanceType=InstanceType;constperson:PersonInstanceType={name:"zhangsan",age:18,};当我们在TypeScript中创建动态类时,InstanceType可用于检索动态实例的类型11.ParametersParameters可用于从函数类型的参数类型中构造一个元组类型。它的声明形式如下:/***获取元组中一个函数类型的参数*/typeParametersany>=Textends(...args:inferP)=>任何?P:never;看下面的例子:constadd=(x:number,y:number)=>{returnx+y;};typeFunctionParameters=Parameters;//TypeofFunctionParameters:[x:number,y:number]除此之外,还可以检测单个参数://"number"typeFirstParam=Parameters[0];//"number"typeSecondParam=Parameters[1];//"undefined"typeThirdParam=Parameters[2];Parameters对于获取类型安全的函数参数类型很有用,尤其是在使用第三方库时:constsaveUser=(user:{name:string;height:number;age:number})=>{//...};constuser:Parameters[0]={name:"zhangsan",height:180,age:18,};12。ConstructorParametersConstructorParameters可以从构造函数的类型构造元组或数组类型。它的声明形式如下:/***获取元组中构造函数类型的参数*/typeConstructorParametersany>=Textendsabstractnew(...args:推断P)=>任何?P:从不;它类似于参数,但对于类构造函数:classPerson{privatename:string;私人年龄:号码;constructor(person:{name:string;age:number}){this.name=person.name;this.age=person.age;}}typeConstructorParametersType=ConstructorParameters;//ConstructorParametersType的类型:[person:{name:string,age:number}]和参数类型,当使用外部库时,它有助于确保构造函数接受参数我们传入:classPerson{privatename:string;私人年龄:号码;constructor(person:{name:string;age:number}){this.name=person.name;this.age=person.age;}}constparams:ConstructorParameters[0]={name:"zhangsan",age:18,};13.从Type传过来的NonNullableNonNullable排除null和undefined创建新类型。它等同于排除。它的声明形式如下:/***ExcludenullandundefinedfromT*/typeNonNullable=Textendsnull|不明确的?从不:T;看下面的例子:typeType=string|空|不明确的;//字符串类型NonNullableType=NonNullable;这里使用NonNullable来去除Type中的null和undefined。