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

快速入门TypeScript—《基础语法篇》注意事项

时间:2023-03-27 23:33:09 HTML

本文不涉及TypeScript安装配置,仅涉及TypeScript语法相关内容。废话不多说,简单直接。1.原始类型consta:string='foo'constb:number=100constc:boolean=trueconstd:void=undefinedconste:null=nullconstf:undefined=undefinedconstg:symbol=Symlol()2.对象类型object不仅仅是对象,还有原始类型以外的类型constfoo:object=function(){}//[]//{}constobj:{foo:number,bar:string}={foo:123,bar:'string'}3。数组类型//第一种定义方式,元素类型设置为*number*constarr1:Array=[1,2,3]//第二种定义方式比较常见constarr2:number[]=[1,2,3]//Examplefunctionsum(...args:number[]){//传统的方法是判断传入的参数是否为数字,但是在TypeScript中只需要在上面做一个类型注解参数同上,returnargs.reduce(prev,current)=>prev+current,0)}sum(1,2,3,'foo')//这里一个不是数字的Values会报一个error4.元组类型元组是一个数组,有明确的元素个数和明确的元素类型。consttuple:[number,string]=[18,'foo']//consttuple:[number,string]=[18,18]如果类型不匹配,会报错//consttuple:[number,string]=[18,'foo','xxx']number不匹配会报错//访问constage=tuple[0]constname=tuple[1]//解构const[age,name]=tuple5,enumtype//enum对象的属性不需要赋值,默认从0开始增量的,也可以赋值Draft=5,后面会从5开始递增。也可以给具体的值,比如Draft='xxx',这样后面的属性就必须赋具体值。enumPostStatus{Draft=0,Unpublished=1,Published=2}constpost={title:'HelloTypeScript',content:'TypeScriptisatypedsupersetofJavaScript.',status:PostStatus.Draft//0//1//2}6.函数类型//声明函数//参数a和b是数字类型,函数返回是字符串类型,//参数后面有问号表示是可选参数//当数字参数的个数不固定,可以使用rest运算符接受参数,类型为数组,值为numberfunctionfunc1(a:number,b?:number,...rest:number[]):string{return'func1'}//函数表达式定义functionconstfunc2=function(a:number,b:number):string{return'func2'}//如果传入一个函数作为参数,类似于回调函数functionfntD(callback:(bl:boolean)=>boolean){callback(true)}functioncallback(bl:boolean):boolean{console.log(bl)returnbl}constdResult=fntD(callback)7.任何类型any//value可以接受任何类型functionstringfy(value:any){returnJSON.stringify(value)}stringify('string')stringify(10)stringify(true)//foo可以被赋予任何值letfoo:any='string'foo=1008,隐式类型推断//age赋值是数字类型letage=18//numberage='string'//会警告错误,因为age是数字类型letfoo//没有赋值,它isanytypefoo=100foo='string'9,typeassertionas//假设这个nums来自显式接口constnums=[110,120,119,112]//这里TypeScript推断res的类型是number|undefined//因为它没有我不知道这个i在数组中是否是const。res=nums.find(i=>i>0)//这里会报错警告constsquare=res*res//如果我们直接断言这个res是数字类型constnum1=resasnumber//这里不会报错constsquare=res*res10,interface接口用于约定对象的结构,一个对象要想实现一个接口就必须拥有这个接口包含的所有成员interfacePost{title:stringcontent:string}functionprintPost(post:Post){console.log(post.title)}console.log(post.content)}printPost({title:'HelloTypeScript',content:'AJavaScriptsuperset'})//特殊接口成员可选成员只读成员接口Post{title:stringcontent:stringsubtitle?:string//添加问号是可选成员readonlysummary:string//添加readonly是只读成员}consthello:Post={title:'HelloTypeScript',content:'Ajavascriptsuperset',summary:'ajavascript'}hello.summary='other'//会报错,因为summary是只读成员//动态成员接口Cache{[prop:string]:string}constcache:Cache={}cache.foo='value1'cache.bar='value2'11,classClassClassPerson{//在这里赋值,在构造函数中初始化必须选择两个name:string//='initname'这里可以直接initializeprivateage:number//这里定义age为私有属性protectedgender:boolean//protectedtypereadonlynational:string//只读属性,一旦初始化alized,cannotbechangeedconstructor(name:string,age:number){//需要在上面的结构体中标明Typeofpropertyinfunctionthis.name=namethis.age=agethis.gender=truethis.national=national}说嗨(米sg:string):void{console.log(`Iam${this.name},${msg}`)console.log(this.age)}}consttom=newPerson('tom',18)console.log(tom.name)//tomconsole.log(tom.age)//报错,因为age是私有属性,所以不能访问console.log(tom.gender)//报错,因为gender是一个受保护的属性,这里不可访问//下面声明一个新的类student继承自PersonclassStudentextendsPerson{constructor(name:string,age:number){super(name,age)console.log(this.gender)//这里一个受保护的属性性别}12、类和接口实现implementinterfaceEat{eat(food:string):void}interfaceRun{run(distance:number):void}//Person类实现了Eat和Run两个接口类PersonimplementsEat,Run{eat(food:string):void{console.log(`Elegantdining:${food}`)}run(distance:number){console.log(`直立行走:${distance}`)}}//Animal类实现Eat和Run接口类Animal实现Eat,Run{eat(food:string):void{console.`)}run(distance:number){console.log(`爬行:${距离}`)}}13.抽象类abstract定义了一个抽象类。抽象类只能继承,不能通过new创建实例对象。//定义一个抽象类AnimalabstractclassAnimal{eat(food:string):void{console.log(`Hungry:${food}`)}//定义一个抽象方法run,不需要方法体//定义完抽象方法后,子类中必须实现抽象方法abstractrun(distance:number):void}classDogextendsAnimal{run(distance:number):void{console.log('四足爬',distance)}}constd=newDog()d.eat('quack')//毫不犹豫的吃:quackd.run(100)//四肢爬行10014,泛型泛型是指定义接口函数时class,没有指定具体的类型,我们在使用的时候会指定这个特性的具体类型//这里声明了一个函数creatNumberArrayfunctioncreateNumberArray(length:number,value:number):number[]{//这里的Array是任何类型的,所以需要赋一个Number类型constarr=Array(length).fill(value)returnarr}//这里声明了一个函数createStringArrayfunction,创建一个String类型的数组createStringArray(length:number,value:string):string[]{constarr=Array(length).fill(value)returnarr}//因为上面两个好玩函数代码多余,这里可以使用泛型//一般我们用T作为泛型参数的名称,然后将函数中有歧义的类型改成T表示函数createArray(length:number,value:T):T[]{constarr=Array(length).fill(value)returnarr}//然后在使用泛型时传递T的类型constres=creatArray(3,'foo')//constres=createNumberArray(3,100)//res=>[100,100,100]基础语法文章到此结束,更多内容请关注我TypeScript的使用,为大家持续更新