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

前端进阶——TS相关

时间:2023-03-29 12:03:07 HTML

TS相关基本概念类型注解:TS中的类型注解是一种轻量级的方法,可以给函数或变量添加约束基本类型Boolean,number,string,array,tuple,enumeration,any,void,null,undefined,never,objectany,unknown,never,void定义any:任意类型的变量unknown:表示未知类型never:永远不存在的值的类型void:无类型,无类型unknown类似于any,但必须在Makeassertions或guards之前使用.从类型推导的角度来看,unknown是最高类型,any是unknown的较低级别,而void用于函数时,never表示函数用于执行不返回值的步骤(抛出异常ordying)loop)返回值类型,即不存在的值的类型,void表示没有返回值,不返回或返回undefined。从类型推导的角度来说,never是最低层,void和any可以在同一层使用。如果你不使用任何,你不需要声明它。如果不确定具体的类型,可以用unknown代替,使用的时候用typeassertion或者typeguard来收缩type。Never通常用于构造条件类型以组合更灵活的类型定义。void通常用来表示一个类型没有返回值。扩展任何和未知。在原始打字稿中,any属于top类型(最高级的类型)。在typescript3.0中,unknown只是是顶级类型你不能对未知类型做任何事情而不缩小类型functiongetDog(){return'22'}cosntdog:unknown=getDog()dog.hello()//Objectisoftype'unknown'sadvancedUsage接口(interface)可以描述一个对象或函数类(class)函数泛型枚举迭代器和生成器装饰器继承、多态、重载、重写抽象类&抽象方法具体用法示例可以参考官网TS编译原理图LR源码-->扫描器(scanner)-->令牌流(中间产品)-->解析器(parser)-->ASTAST-->校验器(checker)-->类型检查函数AST-->binder(绑定器)-->symbois(符号)-.-checker(检查器)-.-emitterAST-->emitter-->javascript代码实线是主进程,一共有三个,虚线是独立进程,符号单独指向checker,checker单独指向emitter。一般来说,graphLRsourceCode->Scanner-->tokenflow-->parser-->asttokenflow类似于ast,是扫描后代码转换的中间产物,也是一个对象,只是key和value不同,但整体构成相似类型推断图graphunknown-->anyany-->nullany-->number-.-neverany-->bigint-.-neverany-->boolean-.-neverany-->string-.-neverany-->object-->array-->tuple-.-neverobject-->function-.-neverany-->void-->undefined面试题从下面的代码推断出来的类型是什么tsleta=1024//numberletb='1024'//stringconstc='apple'//null,const类型被推断为nullletd=[true,false,true]//数组,准确的说是boolean[]lete={name:'apple'}//objectletf=null//nullassignability子集可以赋值给超集,超集不能赋值给子集除非有断言functiona(input:string):string{返回输入}函数b(输入:字符串|number){returninput}//a可以直接赋值给bletinput=a()b(input)//断言方法一:作为关键字letinput=b()a(inputasstring)//断言方法二:通过通用固定参数类型a(input)type和in接口的异同在官方文档中。描述类型的作用是为类型起别名,而接口则侧重于描述数据结构(比如一个对象包含哪些属性)。用法typetypeage=numbertypedataType=number|字符串类型方法='GET'|'发布'|'放'|'DELETE'typeUser={name:stringage:number}//combinedtypetypename={name:string}typeUser=name&{age:string}interfaceinterfaceUser{name:stringage:number}//合并界面interfaceadminextendsUser{id:number}//接口也可以合并typetypeUser={name:stringage:number}interfaceadminextendsUser{id:number}公共点可以描述一个对象或者函数接口和类型可以扩展到彼此,语法不同。接口使用extends关键字,类型使用&符号。不同的是type可以用于其他类型(联合类型、元组类型、基本类型(原始值)),接口不支持typePointX={x:number}typePointY={y:number}//joint输入Point=PointX|PointY//tupletypeData=[PointX,PointY]//原始值typeName=Number//oftypeof返回值letdiv=document.createElement('div')typeB=typeofdivinterface可以定义多次并自动合并所有成员变量。type不支持type可以使用in关键字生成映射类型,interface不支持typeKeys='firstname'|'姓氏'类型DudeType={[keyinKeys]:string}//相当于typeDudeType={firstname:stringsurname:string}装饰器问题执行顺序当有多个参数装饰器时,从最后一个参数开始依次执行,也就是装饰器runs的顺序是相反的。在方法和方法参数中,首先执行参数装饰器。类装饰器总是最后执行方法和属性装饰器。谁先来谁就先执行。因为参数是方法的一部分,所以参数总是在方法的旁边。执行接口类型属性类接口函数类接口可索引接口类类型接口扩展接口