课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函数不返回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}//参数数量或者类型或者返回类型不同// ，在实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="输入新特性"//生命周期普通方privateaddFeature(event:{console.log(event); .value='';}类ts中的类和es6中大体相同，这里重点关注ts带来的特pprivate_foostring;私有属性，不能在类的外protectedbarstring;保护属性，还可以在派生类readonlymua='mua';//只读属性必须 时或构造函数里初始////constructor(privatetua={this._foo='foo';this.bar='bar';}privatesomeMethod()//存取器：存取数据时可添加额外逻辑；在vuegetfoo(){returnthis._foo}setfoo(val){this._foo=val}}范例：自定义类型约束数据结构 ///定义一个特性类，拥 属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;//要求实现方}实现接classGreeter Name='',publiclastName=''){} return o,'+ Name+''+}}//面向接口function { }constuserName:JanelastNameUser'};constusernewGreeter('Jane''User'创建对象实例范例：修改Feature为接口<script<script//interface{id:number;name:}Generics是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特////定义泛型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 }装饰器实际上是工厂函数，传入一个对象，输出处理后的新对类装饰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="";}}装饰器原装饰器实际上是一个函数，通过定义劫持，能够对类及其方法、属性提供额外的扩展功类装饰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}}}实战一下Component，新建<scriptimport{Vue}