開課吧web全棧架構(gòu)師第16期2020完結(jié)typescript實戰(zhàn)

TypeScriptts語裝飾器原源新建一個基于ts的vue項vuevueaddTS類型////ts-letvar1:string;//類型注解var1="開課吧";//var1=4;////編譯器類型推斷可省略這個letvar2=//常見原始類型:類型////類型數(shù)letarr:arr=['Tom'];//或//任意類型anyletvarAnyany;varAny='xx';varAny=3;any類型也可用于數(shù)組letarrAny:any[];arrAny=[1,true, arrAny[1]=//函數(shù)中的類型約function{return}:string):o,';//void類型，常用于沒有返回值的函functionwarn():void//對象object：不是原始類型的functionfn1(o:object){}fn1({prop:0});//OKfn1(1);//Errorfn1("string");//Error//更好的約束方式應(yīng)該是下面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;聯(lián)合希望某個變量或參數(shù)的類型是多種類型其中l(wèi)etletunion:string|number;union='1';//okunion=1;//交叉typetypeFirst={first:number};typeSecond={second:number};typeFirstAndSecond=First&functionfn3(param:FirstAndSecond):{return{first:1,}必填參：參數(shù)一旦，就要求傳遞，且類型需符////02-function :string):{return o," }可選參數(shù)：參數(shù)名后面加上問號，變成可選functionfunction{returno,":string,msg?:string):;}默認functionfunction{returno,":string,msg=''):;}*函數(shù)重載：以參數(shù)數(shù)量或類型區(qū)分多個同////重載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('執(zhí)行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";//保護屬性，可以在子類//參數(shù)屬性：構(gòu)造函數(shù)參數(shù)加修飾符，能夠定constructor(publictua="tua")//方法也有修飾符privatesomeMethod()//存取器：屬性方 ，可添加額外邏輯，控制讀寫getfoo()return}set{this._foo=}} <li>特性數(shù)量 <scriptexportdefault oWorldextendsVue//定義getter作為計算getcount()return}}接口僅約束結(jié)構(gòu)，不要求實////04- 接口定義了 firstName:string;lastName:string;}//greeting函數(shù)通過functiongreeting(接口約束:return o,').firstName+''}greeting({firstName:'Jane',lastName:'User'});//greeting({firstName:////接口中只需定義結(jié)構(gòu)，不interface{id:number;name:}使用 <!--修改模板<liv-for="featureinfeatures" <script//導(dǎo)入接import{Feature}fromexportdefault//修改數(shù)據(jù)結(jié)構(gòu)oextendsVuefeatures:Feature[]=[{id:1,name:"類型注解"addFeature(e:KeyboardEvent)新增的數(shù)據(jù)也要符合Feature結(jié)this.features.push({id:this.features.length+1,name:inp.value}}泛型（Geneis）是指在定義函數(shù)、接口或類的時候，不預(yù)先指定具體的類型，而在使用的時候再指定類型的一種特性。以此增加代碼通用性。////不用泛//interfaceResult ok:0| data:////使用泛interface{ok:0|1;data:T;}//泛型方functiongetResult<T>(data:T):{return{ok:1,}}//用尖括號方式指定T為string //用類型推斷指定T為number泛型優(yōu)點函數(shù)和類可以支持多種類型安裝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()參數(shù)是為vue提供屬性//!稱為明確賦值斷言，它是提供給ts@Prop({type:String,required:true})privatemsg!:string;}新增特性時派發(fā)通知，////通知父類新，若未指名則函數(shù)名作 名（羊肉串形式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，類型是函數(shù)且無返回值@Mutationadd!:()=>void;//add仍是type，但是會和上面重名，需//類型是函數(shù)返回值是@Action("add")asycAdd!:()=>}裝飾器是工廠函數(shù)，它能和修改functionlog(target:Function){//target是構(gòu)造函數(shù)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