当前位置: 首页 > Web前端 > vue.js

TypeScript有哪些基本类型

时间:2023-03-31 15:26:01 vue.js

ts是一个编译js的工具npminstall-gtypescript使用命令:tscexample.ts只执行ts代码,不编译工具1、nodemon,只要把代码保存后,会执行,建议安装:```npminstall-gnodemon```使用:```nodemonexample.ts```2、ts-node,每次需要执行ts-node安装命令:```npminstall-gts-node```使用:```ts-nodeexample.ts```TypeScript有哪些基本类型:任意类型、数字类型、布尔类型,数组类型,元组类型,enum枚举类型,void类型,null类型,undefine类型,never类型/*any类型,any类型,表示可以给任何类型的值赋值*/letany:any//是等价的toletany/*numbertype*/letnum:number=1;/*stringtype*/letstr:string='string'/*boolean*/letboolean:boolean=true;/*数组类型,表示元素的类型都是一样的*/letarr:number[]=[];//一般写法letarr1:Array=[1,2];//使用泛型,将数组内容指定为数字类型letarr2:Array=['1','2'];//使用泛型,指定数组内容为字符串类型letarr3:Array=[true,false];//使用泛型指定数组内容为boolean类型/*tuple类型,表示每个元素对应的位置必须是同一类型*/lettuple:[number,string,boolean];//正确的写法,元素位置类型一一对应tuple=[1,'str',true];//tuple=[1,2,'str'];//写错了/*enum枚举类型,用于定义一个值集合*/enumColor{Red,Green,Blue};letc:Color=Color.Red;//取枚举类型中Red的枚举值0console.log(c);//Output0c=1.1//其实可以赋number类型,但是不允许赋其他类型的值。Color.Red的值为number/*void类型,用于表示函数/方法没有返回值*/functionfunc():void{//return1//如果有返回值,则是错误的return//正确的写法,可以不写}/*null类型,表示不属于任何类型*/letnu:nullnu=null//正确的赋值/*undefinetype*/letund1:any=undefined//这是一个通用的用法,将变量初始化为一个undefined值letund2:undefined=undefined//正确赋值/*nevertype表示不是上面所有类型,只能是异常类型*/letx:never;lety:number;//x=123;//运行错误,number类型无法转换为nevertypex=(()=>{thrownewError('exception')})();//never类型可以赋值为nevertypey=(()=>{thrownewError('exception')})();//never类型可以赋值给number类型functionerror(message:string):never{thrownewError(message);//返回值为never的函数可以抛出异常}functionloop():never{while(true){}//返回值为never的函数可以是无法执行的终止点情况}也许你会奇怪为什么没有对象(Object)、数组(Array)、函数(Function)类型,以及两个特殊的对象:正则(RegExp)和日期(Date)。其实这些都有,因为ts保留了js的所有特性,TypeScript也可以声明为Object类型,可以赋值除了nullclasstype,undefinetype,nevertype,其他类型都可以(理解一切皆对象,呵呵)letobj:Objectobj=function(){}console.log(typeofobj);//functionobj={}log(typeofobj);//objectobj=[]console.log(typeofobj);//objectobj=1console.log(typeofobj);//numberobj='str'console.log(typeofobj);//stringobj=undefined//Errorobj=null//报错可能会让你对枚举类型产生很多疑惑。接下来我们来了解一下枚举枚举是一种组织和收集关联变量的方式。很多编程语言(如:c/c#/Java)都有枚举数据类型。枚举可以分为数值枚举、字符串枚举、常量枚举、开放式枚举和带静态方法的枚举。数值枚举enumColor{Red,//0Green,//1Blue//2}console.log(Color.Red);//输出0console.log(Color.Green);//输出1个或多个ts代码这样编译成js代码,就是varTristate;(function(Tristate){Tristate[(Tristate['False']=0)]='False';Tristate[(Tristate['True']=1)]='True';Tristate[(Tristate['Unknown']=2)]='Unknown';})(Tristate||(Tristate={}))console.log(Tristate);//三态输出如下/*{'0':'False','1':'True','2':'Unknown',False:0,True:1,Unknown:2}*/}可以通过具体的赋值来改变任意枚举成员关联的编号,下面的例子,我们从3开始依次递增递增的规则是:如果不给出当前位置的值,也不给出具体的值,它会根据前一个位置的值+1enumColor{Red=3,Green,Blue}console.log(Color.Red);//输出3console.log(Color.Green);//输出4其实可以这么玩,是对其他值进行一定的计算enumAnimalFlags{None=0,HasClaws=1<<0,CanFly=1<<1,EatsFish=1<<2,Endangered=1<<3,//对上述值执行某些计算composition=HasClaws|能飞|吃鱼|濒危}字串枚举exportenumEvidenceTypeEnum{UNKNOWN='',PASSPORT_VISA='passport_visa',PASSPORT='passport',SIGHTED_STUDENT_CARD='sighted_tertiary_edu_id',SIGHTED_KEYPASS_CARD='sighted_keypass_card',SIGHTED_PROOF_OF_age_card更容易调试,因为它们提供有意义/可调试的字符串您可以使用它们进行简单的字符串比较://Where`someStringFromBackend`willbe''|'护照签证'|'passport'...etc.constvalue=someStringFromBackendasEvidenceTypeEnum;//codeif中的示例使用(value===EvidenceTypeEnum.PASSPORT){console.log('Youprovidedapassport');控制台日志(值);//`passport`}constantenumeration枚举类型加上const关键字有助于性能提升,下面的代码会编译成varlie=0;在这里编译是因为它不会为枚举类型编译成任何JavaScript(在这个例子中,运行时没有Tristate变量),因为它使用内联语法。constenumTristate{False,True,Unknown}constlie=Tristate.False;如果没有const关键字,编译结果是这样的,所以性能提升了varTristate;(函数(三态){三态[三态[“假”]=0]=“假”;三态[三态[“真”]=1]=“真”;三态[三态[“未知”]=2]=“未知”;})(三态||(三态={}));varlie=Tristate.False;常量枚举preserveConstEnums选项使用内联语法来显着提高性能。事实上,在运行时没有三态变量是因为编译器帮助你将一些在运行时不使用的变量反编译到JavaScript中。但是,您可能希望编译器仍将枚举类型编译为JavaScript,以便在上面的示例中从字符串查找数字,或从数字查找字符串。在这种情况下,您可以使用编译选项--preserveConstEnums,它会编译出varTristate的定义,因此您可以在运行时手动使用Tristate['False']和Tristate[0]。这不会以任何方式影响内联。具有静态方法的枚举您可以使用枚举+命名空间声明将静态方法添加到枚举类型。我们将静态成员isBusinessDay添加到枚举中,如下例所示:caseWeekday.Saturday:caseWeekday.Sunday:返回false;默认值:返回真;}}}constmon=Weekday.Monday;constsun=Weekday.Sunday;console.log(Weekday.isBusinessDay(mon));//trueconsole.log(Weekday.isBusinessDay(sun));开放枚举下面的同名枚举可以合并,但是需要注意的是,在一个有多个声明的枚举中,只有一个声明可以省略它的第一个枚举元素的初始化公式,否则会报错enumColor{Red,Green,Blue}enumColor{DarkRed=1,DarkGreen,DarkBlue}js编译结果如下:varColor;(function(Color){Color[Color["Red"]=0]="Red";颜色[颜色["绿色"]=1]="绿色";颜色[颜色["蓝色"]=2]="蓝色";})(颜色||(颜色={}));(函数(颜色){颜色[颜色["深红色"]=0]="深红色";颜色[颜色[";DarkGreen"]=1]="DarkGreen";Color[Color["DarkBlue"]=2]="DarkBlue";})(Color||(Color={}));console.log(Color);//输出结果/*{'0':'DarkRed','1':'DarkGreen','2':'DarkBlue',Red:0,Green:1,Blue:2,DarkRed:0,DarkGreen:1,深蓝:2}*/