版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
TypeScriptts语装饰器原源新建一个基于ts的vue项vuevueaddTS类型////ts-letvar1:string;//类型注解var1="开课吧";//var1=4;////编译器类型推断可省略这个letvar2=//常见原始类型:类型////类型数letarr:arr=['Tom'];//或//任意类型anyletvarAnyany;varAny='xx';varAny=3;any类型也可用于数组letarrAny:any[];arrAny=[1,true, arrAny[1]=//函数中的类型约function{return}:string):o,';//void类型,常用于没有返回值的函functionwarn():void//对象object:不是原始类型的functionfn1(o:object){}fn1({prop:0});//OKfn1(1);//Errorfn1("string");//Error//更好的约束方式应该是下面functionfn2(o:{prop:number}){}fn2({prop:0})//OK//类型别名type:自typeProp={prop:number//fn3变得更清爽了functionfn3(oProp){}范例, <liv-for="featureinfeatures" <scriptimport{Component,Prop,Vue}from"vue-property-exportdefaultoextends{features:string[]=["类型注解","编译型语言}类型constconstsomeValue:any="thisisastring";conststrLength=(someValueasstring).length;联合希望某个变量或参数的类型是多种类型其中letletunion:string|number;union='1';//okunion=1;//交叉typetypeFirst={first:number};typeSecond={second:number};typeFirstAndSecond=First&functionfn3(param:FirstAndSecond):{return{first:1,}必填参:参数一旦,就要求传递,且类型需符////02-function :string):{return o," }可选参数:参数名后面加上问号,变成可选functionfunction{returno,":string,msg?:string):;}默认functionfunction{returno,":string,msg=''):;}*函数重载:以参数数量或类型区分多个同////重载functionwatch(cb1:()=>void)://重载functionwatch(cb1:()=>void,cb2:(v1:any,v2:any)=>void)://functionwatch(cb1:()=>void,cb2?:(v1:any,v2:any)=>{if(cb1&&cb2){}elseconsole.log('执行watch重载}}范例:新增特性,<input<input ceholder="输入新特性"addFeature(e:KeyboardEvent)//e.target是EventTarget类型,需要断言为HTMLInpu constinp=e.targetasHTMLInpu inp.value=}范例:生命周期钩子,createdcreated()this.features=[{id:1,name:"类型注解"}类}class的特}classParentprivate_foo="foo";//私有属性,不能在类的外protectedbar="bar";//保护属性,可以在子类//参数属性:构造函数参数加修饰符,能够定constructor(publictua="tua")//方法也有修饰符privatesomeMethod()//存取器:属性方 ,可添加额外逻辑,控制读写getfoo()return}set{this._foo=}} <li>特性数量 <scriptexportdefault oWorldextendsVue//定义getter作为计算getcount()return}}接口仅约束结构,不要求实////04- 接口定义了 firstName:string;lastName:string;}//greeting函数通过functiongreeting(接口约束:return o,').firstName+''}greeting({firstName:'Jane',lastName:'User'});//greeting({firstName:////接口中只需定义结构,不interface{id:number;name:}使用 <!--修改模板<liv-for="featureinfeatures" <script//导入接import{Feature}fromexportdefault//修改数据结构oextendsVuefeatures:Feature[]=[{id:1,name:"类型注解"addFeature(e:KeyboardEvent)新增的数据也要符合Feature结this.features.push({id:this.features.length+1,name:inp.value}}泛型(Geneis)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。以此增加代码通用性。////不用泛//interfaceResult ok:0| data:////使用泛interface{ok:0|1;data:T;}//泛型方functiongetResult<T>(data:T):{return{ok:1,}}//用尖括号方式指定T为string //用类型推断指定T为number泛型优点函数和类可以支持多种类型安装axiosnpmiaxios-配置一个模拟接module.exportsmodule.exports{devServer:{app.get('/api/list',(req,res){{id:1,name:"类型注解",version:"2.0"{id:2,name:"编译型语言",version:"1.0"}}}importimportaxiosfromimportFeaturefromexportfunctiongetFeatures()//通过泛型约束返回值类型,这里是Promise<AxiosResponse<Feature[]>>returnaxios.get<Feature[]>('/api/list')} createdcreated()//getFeatures()返回//res类型推断为//res.data类型推断为Feature[]getFeatures().then(res=>{this.features=}////importaxiosfrom'axios'Vtotype.$axios=axios;//shims-vue.d.tsimportVuefrom"vue";import{AxiosInstance}fromdeclaremodule{interfaceVue$axios:}}importimportVueRouterfrom"vue-router";import{Store}from"vuex";declaremodule{interfaceComponentOptions<Vextends{router?:VueRouter;store?:}属性exportdefaultclassoWorldextendsVue//Props()参数是为vue提供属性//!称为明确赋值断言,它是提供给ts@Prop({type:String,required:true})privatemsg!:string;}新增特性时派发通知,////通知父类新,若未指名则函数名作 名(羊肉串形式privateaddFeature(event:any){//若没有返回值形参将作 参constfeature={name:event.target.value,id:this.features.length+1};event.target.value=returnfeature;//若有返回值则返回值作 参}onMsgChange(val:string,oldVal:any){console.log(val,}vuex-class为 npmnpmivuex-class-使用,<h3<h3<h3import{Action,State}from"vuex-exportdefaultoextends{@Statecounter!://add即是type,类型是函数且无返回值@Mutationadd!:()=>void;//add仍是type,但是会和上面重名,需//类型是函数返回值是@Action("add")asycAdd!:()=>}装饰器是工厂函数,它能和修改functionlog(target:Function){//target是构造函数console.log(target===Foo);//totype.log=function(){}}class{bar=}constfoo=new//@ts-方法装饰functionfunctiondong(target:any,name:string,descriptor:any)//这里通过修改descriptor.value扩展了bar方法constbaz=descriptor.value;descriptor.value=function(val:string){baz.call(this,val);}return}class{@dongsetBar(val:string){this.bar=}}属性装饰////属性装饰functionmua(target,{target[name]=}classFoo@mua}稍微改造一下使其可以接收functionfunctionmua(param:string){returnfunc
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年广东客运驾驶员考试选择题及答案解析
- 2024年沈阳客运证考试题库
- 2024年秦皇岛客运从业资格证考试模拟
- 公司上班睡觉检讨书
- 公司国庆节放假通知
- 吉林省长春市第一O三中学校2024-2025学年九年级上学期期中英语试题
- 国家司法考试卷二行政法(行政法学的基本概念)模拟试卷1题后含
- 雨季临时排水应急方案
- 印刷机操作员聘用合同协议
- 能源开发计量基准管理办法
- 匹兹堡睡眠质量指数(psqi)表格
- 5、火灾事故桌面演练记录表
- 《甲基化与肿瘤》PPT课件.ppt
- 中国电信渠道管理工作指导意见
- 海水比重与盐度换算表
- 行政法对宪法实施的作用探讨
- BIM等信息技术的使用
- 西方发愿文是一篇圆满的作品它包括了初中后三阶段最
- 檩条规格选用表
- 图形推理100道(附答案)
- 群青生产工艺过程
评论
0/150
提交评论