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

TypeScriptts語(yǔ)裝飾器原源新建一個(gè)基于ts的vue項(xiàng)vuevueaddTS類(lèi)型////ts-letvar1:string;//類(lèi)型注解var1="開(kāi)課吧";//var1=4;////編譯器類(lèi)型推斷可省略這個(gè)letvar2=//常見(jiàn)原始類(lèi)型:類(lèi)型////類(lèi)型數(shù)letarr:arr=['Tom'];//或//任意類(lèi)型anyletvarAnyany;varAny='xx';varAny=3;any類(lèi)型也可用于數(shù)組letarrAny:any[];arrAny=[1,true, arrAny[1]=//函數(shù)中的類(lèi)型約function{return}:string):o,';//void類(lèi)型，常用于沒(méi)有返回值的函functionwarn():void//對(duì)象object：不是原始類(lèi)型的functionfn1(o:object){}fn1({prop:0});//OKfn1(1);//Errorfn1("string");//Error//更好的約束方式應(yīng)該是下面functionfn2(o:{prop:number}){}fn2({prop:0})//OK//類(lèi)型別名type：自typeProp={prop:number//fn3變得更清爽了functionfn3(oProp){}范例， <liv-for="featureinfeatures" <scriptimport{Component,Prop,Vue}from"vue-property-exportdefaultoextends{features:string[]=["類(lèi)型注解","編譯型語(yǔ)言}類(lèi)型constconstsomeValue:any="thisisastring";conststrLength=(someValueasstring).length;聯(lián)合希望某個(gè)變量或參數(shù)的類(lèi)型是多種類(lèi)型其中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ù)一旦，就要求傳遞，且類(lèi)型需符////02-function :string):{return o," }可選參數(shù)：參數(shù)名后面加上問(wèn)號(hào)，變成可選functionfunction{returno,":string,msg?:string):;}默認(rèn)functionfunction{returno,":string,msg=''):;}*函數(shù)重載：以參數(shù)數(shù)量或類(lèi)型區(qū)分多個(gè)同////重載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類(lèi)型，需要斷言為HTMLInpu constinp=e.targetasHTMLInpu inp.value=}范例：生命周期鉤子，createdcreated()this.features=[{id:1,name:"類(lèi)型注解"}類(lèi)}class的特}classParentprivate_foo="foo";//私有屬性，不能在類(lèi)的外protectedbar="bar";//保護(hù)屬性，可以在子類(lèi)//參數(shù)屬性：構(gòu)造函數(shù)參數(shù)加修飾符，能夠定constructor(publictua="tua")//方法也有修飾符privatesomeMethod()//存取器：屬性方 ，可添加額外邏輯，控制讀寫(xiě)getfoo()return}set{this._foo=}} <li>特性數(shù)量 <scriptexportdefault oWorldextendsVue//定義getter作為計(jì)算getcount()return}}接口僅約束結(jié)構(gòu)，不要求實(shí)////04- 接口定義了 firstName:string;lastName:string;}//greeting函數(shù)通過(guò)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:"類(lèi)型注解"addFeature(e:KeyboardEvent)新增的數(shù)據(jù)也要符合Feature結(jié)this.features.push({id:this.features.length+1,name:inp.value}}泛型（Geneis）是指在定義函數(shù)、接口或類(lèi)的時(shí)候，不預(yù)先指定具體的類(lèi)型，而在使用的時(shí)候再指定類(lèi)型的一種特性。以此增加代碼通用性。////不用泛//interfaceResult ok:0| data:////使用泛interface{ok:0|1;data:T;}//泛型方functiongetResult<T>(data:T):{return{ok:1,}}//用尖括號(hào)方式指定T為string //用類(lèi)型推斷指定T為number泛型優(yōu)點(diǎn)函數(shù)和類(lèi)可以支持多種類(lèi)型安裝axiosnpmiaxios-配置一個(gè)模擬接module.exportsmodule.exports{devServer:{app.get('/api/list',(req,res){{id:1,name:"類(lèi)型注解",version:"2.0"{id:2,name:"編譯型語(yǔ)言",version:"1.0"}}}importimportaxiosfromimportFeaturefromexportfunctiongetFeatures()//通過(guò)泛型約束返回值類(lèi)型，這里是Promise<AxiosResponse<Feature[]>>returnaxios.get<Feature[]>('/api/list')} createdcreated()//getFeatures()返回//res類(lèi)型推斷為//res.data類(lèi)型推斷為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;}新增特性時(shí)派發(fā)通知，////通知父類(lèi)新，若未指名則函數(shù)名作 名（羊肉串形式privateaddFeature(event:any){//若沒(méi)有返回值形參將作 參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，類(lèi)型是函數(shù)且無(wú)返回值@Mutationadd!:()=>void;//add仍是type，但是會(huì)和上面重名，需//類(lèi)型是函數(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)//這里通過(guò)修改descriptor.value擴(kuò)展了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}稍微改造一下使其可以接收f(shuō)unctionfunctionmua(param:string){returnfunc