开课吧web全栈架构师第16期2020完结typescript实战

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