当前位置: 首页 > Web前端 > JavaScript

ts进阶工具类

时间:2023-03-26 22:37:37 JavaScript

关键字,技巧了解keyof,用于获取一个对象接口interfacePoint的所有key值{x:number;y:number;}//键入keys="x"|"y"typekeys=keyofPoint;in可以遍历枚举类型keys="a"|"b"typeObj={[pinKeys]:any}//->{a:any,b:any}typeof用于获取基础数据的类型letp={name:'zs',age:10}functionp1(parmas:typeofp){//它将解析p。然后就变成了parmas:{name:string,age:number}console.log(p.age)console.log(p.name)}p1(p)注意只能用来查询变量或者属性的类型.无法查询其他形式的类型。例如:返回调用的类型。extends条件语句extends可以用来继承一个类和接口,也可以用来判断条件类型TextendsU?X:Y//TUXY四个是占位符,分别代表四种类型;//TextendsU表示T类型可以赋值给U类型,这里也涉及到TS类型兼容性;//条件类型的分布特征(续)infer在extends条件语句中声明了一个变量来携带某些要推断的类型。infer语法限制如下:infer只能用在条件类型的extends子句中。infer得到的类型只能在true语句中使用,即usetypeUnion=TextendsArrayinX?U:never//Pan类型参数T满足约束条件Array,则返回此类型变量UtypeParamType=Textends(param:inferP)=>any?P:T;//分析T是否可以赋值给(param:inferP)=>任意类型,返回P,否则返回TinterfaceIDog{name:string;age:number;}typeFunc=(dog:IDog)=>void;typeParam=ParamType;//IDogtypeTypeString=ParamType;//stringis和assertsts不会检测自定义方法的判断语句。如果有必要,分发判断,参数签名必须在自定义方法中完成,无论是谓词签名还是断言签名assertsCan//assertsassertfunctionyell(str:any){console.log(str);//str:anyassert(typeofstr==='string');返回海峡;//str:string,assertedbyasserts//没有断言,这里str还是any}functionassert(condition:any):as插入条件{if(!condition){thrownewError('Error====');}}//是Nil(v:T|undefined|null):v未定义|空{返回v===未定义||v===null;}functiontest(v:number|undefined|null){if(!isNil(v)){console.log(Math.round(v));//Noissignature//ts警告如下//Argumentoftype'number|空|undefined'不可分配给'number'类型的参数。//Type'undefined'isnotassignabletotype'number'.ts(2345)}}NoissignaturewarningadvancedtooltypePartial,传入的属性变为可选//sourcecodetypePartial={[PinkeyofT]?:T[P]};//示例typeAnimal={name:string,category:string,age:number,eat:()=>number}typePartOfAnimal=Partial;//PartOfAnimal继承animal的所有属性,但都是optionalRequired,使传入的属性为必填,与Partial相反//源代码类型Required={[PinkeyofT]-?:T[P]};Mutable,把type属性“改成optionalModify”//源码typeMutable={-readonly[PinkeyofT]:T[P];};Readonly,把type的属性设为只读",相反-readonly,是去掉子属性的readonlyflag//源码类型Readonly={readonly[PinkeyofT]:T[P]};记录,将K中所有属性的值转为T类型//源码类型Record={[PinK]:T};//例1接口PageInfo{title:string;}typePage="home"|“关于”|“接触”;constnav:Record={about:{title:"about"},contact:{title:"contact"},home:{title:"home"},};//例子2typekeys='一个'|'乙'|'C'constresult:Record={A:1,B:2,C:3}//示例3Record//相当于接口api{[key:string]:string|string[];}Pick,选择性继承,从T中取出一系列K个属性,//源码类型Pick={[PinK]:T[P]};//示例接口用户{id:number;年龄:数字;name:string;};//相当于:typePartialUser={id?:number;年龄?:数字;名称?:字符串;}typePartialUser=Partial//等同于:typePickUser={id:number;年龄:数字;}类型PickUser=Pick<用户,"id"|"age">Omit,忽略继承和Pick都是继承,只是获取key的方式相反。//源代码typeOmit=Pick>//使用typePickUser=Omit//等价于:typePickUser={id:number;年龄:数字;}Extract,Exclude的作用是把T中包含的元素提取到U中,其实就是从T中找到T和U的交集//源码类型Extract=TextendsU?T:never;//示例类型T=Extract<1|2,1|3>//->1Exclude,exclude,如果T是U的子类型,则返回X,否则返回YExclude的作用是从T中找出没有,即更接近的元素语义实际上是从T//源代码类型中排除UExclude=TextendsU?从不:T;接口学生{名称:字符串;addr:string;}typeExcludeKeys=Exclude;//typeExcludeKeys='addr';//示例typeT=Exclude<1|2,1|3>//->2ReturnType,获取函数返回值//源代码类型ReturnTypeany>=Textends(...args:any)=>inferR?R:any;NonNullable,从类型T//sourcetypeNonNullable=Textendsnull|中排除null和undefined|不明确的?never:T;//示例类型Msg=string|空|编号|不明确的;输入MsgNonNullable=NonNullable;//等价类型nonNullable=string|数字;Nullablecanbenull//源代码声明类型Nullable=T|null;//示例类型Msg=string|number;typeMsgNonNullable=Nullable;//等效类型nonNullable=string|编号|null;Parameters,获取函数的参数类型//源代码类型Parametersany>=Textends(...args:inferP)=>any?P:never;//示例constupdata=(a:string,b:number)=>({a,b});typeArrType=Parameters//ArrType=>[a:string,b:number]ConstructorParameters,获取构造函数的参数类型和Parameters的区别在于参数类型仅限于abstract抽象类//源代码类型ConstructorParametersany>=Textendsabstractnew(...args:inferP)=>任何?P:never;InstanceType,获取实例类型,通过传入抽象类参数获取其实例类型//源码类型InstanceTypeany>=Textendsabstractnew(...args:any)=>推断R?R:any;//示例constupdata=(a:string,b:number)=>({a,b});typeArrType=Parameters//ArrType=>[a:string,b:number]自定义工具类型NonFunctionKeys,获取所有的key非函数类型属性//实现类型NonFunctionKeys={[KinkeyofT]-?:T[K]extendsFunction?never:K}[keyofT]NonFunction,排除对象中的函数Newtype//implementtypeNonFunction=Pick>AxiosReturnType,获取AxiosPromise返回的Resp类型axios方法//import{AxiosPromise}from'axios'typeAxiosReturnType=Textends(...args:any[])=>AxiosPromise?R:anyArrayElement,提取数组成员类型的一种方法是使用extends限制数组类型,然后利用数组key类型为number的特性提取其属性类型//implementstypeArrayElement=T[number];typeAEL=ArrayElement<[number,string]>;//数字|string第二种写法的核心思想是使用inferto隐式数组的属性类型//implementtypeArrayElement=Aextendsreadonly(inferT)[]?T:从不