課typescript7月15號-筆記vue09瑞客論壇

資TypeScriptvue中的知識新建一個基于ts的vue項vuevuecreatevue-選項選擇自定義選Manuallyselect添加ts支持-基于類的組件yTypeScript是JavaScript的超集，它可編譯為純JavaScript，是一種給JavaScript添加特性的語言擴展letletname"xx"類型推lettitlestring"開課吧"類型注name2;title4;letnames:names=['Tom'];//或letfoo:any='xx'foo=3//anyletlist:any[]=[1,true,"free"];list[1]=100;//function{returno,':string):;}functionwarnUser():void{alert("Thisismywarningmessage");內置的類void函數(shù)不返回any任意類范例 <scriptimport{Component,Prop,Vue}from"vue-property-exportdefaultoextends{@Prop()msg!:string;features:string[];constructor(){}}////此處name和age////functiono(name:string,age:number=20,addr?:string):return你好：name}//參數(shù)數(shù)量或者類型或者返回類型不同// ，在實functioninfo(a:{name:string}):string;functioninfo(a:string):object;functioninfo(a:{name:string}|string):{if(typeofa==="object"){return;}elsereturn{name:a}}console.log(info({name:"tom"范例：新增特性 <input<inputtype="text"placeholder="輸入新特性"http://生命周期普通方privateaddFeature(event:{console.log(event); .value='';}類ts中的類和es6中大體相同，這里重點關注ts帶來的特pprivate_foostring;私有屬性，不能在類的外protectedbarstring;保護屬性，還可以在派生類readonlymua='mua';//只讀屬性必須 時或構造函數(shù)里初始////constructor(privatetua={this._foo='foo';this.bar='bar';}privatesomeMethod()//存取器：存取數(shù)據(jù)時可添加額外邏輯；在vuegetfoo(){returnthis._foo}setfoo(val){this._foo=val}}范例：自定義類型約束數(shù)據(jù)結構 ///定義一個特性類，擁 屬classFeature}//exportdefault oWorldextends{privatefeatures:{super();id:1name:類型注解id:2name:編譯型語言}}//template范例：利用getter設置計算getcount()return}class的原class是語法糖，它指向的就是構造函constructor(name,age){//constructor是默認方法，new實例時自動調用=name;//屬性會 this.age=}say(){// 在原型return 名字叫"今年this.age"歲了}} );// .prototype.constructor);//{=this.age=}.prototype.say=return 名字叫"++"今年"+this.age+"歲了}interface，僅定義結構，不需要{string; o():string;//要求實現(xiàn)方}實現(xiàn)接classGreeter Name='',publiclastName=''){} return o,'+ Name+''+}}//面向接口function { }constuserName:JanelastNameUser'};constusernewGreeter('Jane''User'創(chuàng)建對象實例范例：修改Feature為接口<script<script//interface{id:number;name:}Generics是指在定義函數(shù)、接口或類的時候，不預先指定具體的類型，而在使用的時候再指定類型的一種特////定義泛型interface{ok:0|data:}//定義泛型constdata:any[]=[id1name"類型注解"version"2.0"id2name"編譯型語言"version"1.0"return{ok:1,data}使用泛this.features=返回{constdata:any[]=id1name"類型注解"version"2.0"id2name"編譯型語言"version"1.0"returnPromise.resolve<Result<T>>({ok:1,data}使asyncasynccreated()this.features=resu }裝飾器實際上是工廠函數(shù)，傳入一個對象，輸出處理后的新對類裝飾exportdefaultoextendsVue@Prop({required:true,type:String})privatemsg!:@Watch("features",{deep:true})console.log(val,}privateaddFeature(event:{constfeature=name:event. version:"1.0" return}}vuex使用：vuex-安npmnpmivuex-class-定義狀exportexportdefaultnewstate:features:['類型檢測','預編譯mutations:addFeatureMutation(state:any,string){state.features.push({id:state.features.length+1,name:}actions:commitcommit('addFeatureMutation',}}使用 importimport{State,Action,Mutation}from"vuex-exportdefaultclassFeatureextendsVue//@Statefeatures!:string[];@ActionaddFeatureAction;private{//this.features.push(event. //this.addFeaturMutation(event. .value="";}}裝飾器原裝飾器實際上是一個函數(shù)，通過定義劫持，能夠對類及其方法、屬性提供額外的擴展功類裝飾function) ===Foo);//.isFoo= }function ,name) 是原型，name是屬性 ===Ftotype);[name]='mua~~~'}function ,name,descriptor) ===//方法的定義方式：Object.defineProperty( ,name,descriptor) [name]===descriptor.value);//這里通過修改descriptor.value擴展了barconstconstbar=descriptor.value;}return}@muaaaa:constructorconsole.log('F}}}實戰(zhàn)一下Component，新建<scriptimport{Vue}