在Vue.js中使用TypeScript的方法

2023-07-28 10:10:13 77

虽然vue2.x对TypeScript的支持还不是非常完善，但是从今年即将到来的3.0版本在GitHub上的仓库 vue-next看，为TS提供更好的官方支持应该也会是一个重要特性，那么，在迎接3.0之前，不妨先来看看目前版本二者的搭配食用方法吧~

创建项目

虽然GitHub上有各种各样相关的Starter，但是使用VueCLI应该是目前相对比较好的方式，在使用vuecreate创建新项目时，对preset选择Manuallyselectfeatures选项，之后添加TypeScript
如果想在vue应用中完整使用ES6中提供的类特性，那么在class-stylecomponentsyntax处选择Y（本文主要介绍选择Y的情况）
对于Babel来说，一般情况选择使用，而linter/formatter的具体选择可根据项目需求，此处不多说明

进入项目

创建完成后，看一看package.json，可以发现vue-class-component和vue-property-decorator以及其他ts相关的modules都已被添加，其中：vue-class-component可以让你使用class-style语法创建组件，比如以下代码：




importVuefrom'vue'
importComponentfrom'vue-class-component'

//Definethecomponentinclass-style
@Component
exportdefaultclassCounterextendsVue{
//Classpropertieswillbecomponentdata
count=0

//Methodswillbecomponentmethods
increment(){
this.count++
}

decrement(){
this.count--
}
}

而vue-property-component则完全依赖于前者，提供了除@Component外的其他几种装饰器，比如@Prop

import{Vue,Component,Prop}from'vue-property-decorator'

@Component
exportdefaultclassYourComponentextendsVue{
@Prop(Number)readonlypropA:number|undefined
@Prop({default:'defaultvalue'})readonlypropB!:string
@Prop([String,Boolean])readonlypropC:string|boolean|undefined
}

再来一个二者结合的简单例子吧:




import{Component,Prop,Vue,Watch}from'vue-property-decorator';

@Component
exportdefaultclassHelloWorldextendsVue{
@Prop()privatemsg!:string;
firstName="rapt";
lastName="azure";

mounted(){
console.log('mounted');
}

//Computedproperty
getfullName():string{
returnthis.firstName+this.lastName;
}

//Method
reverseStr(){
this.firstName=this.firstName.split('').reverse().join('');
this.lastName=this.lastName.split('').reverse().join('');
}

}

此时，你的vue项目已经有fully-typed的可能了，当然也会有更好的自动补全以及错误提示。
为了更好的确定类型，可以创建例如interfaces这样的文件夹，充分利用ts的接口和类来使项目有更好的组织结构，可读性和维护性。

另一种选择

其实当然也可以不使用class风格啦，这样的话，就和平时熟悉的vue更为相似了，而对类型当然也是完全支持的。
这里也提供一个简单的例子吧~ importVuefrom'vue'; exportdefaultVue.extend({ name:'HelloWorld', props:{ msg:String, }, data(){ return{ test:"HellofromTS"asstring } }, methods:{ pressMe():string{ returnthis.test+'br' } } });

其他的话

本文只是简要探讨了在Vue.js中使用TypeScript的可能性，更多的相关内容在官方文档里可以找到哦，或者也可以多去Github的Vue区，TS区逛逛呢~
TypeScript的出现为JavaScript的生态带来了新活力，不管是前端三大框架Vue，React，Angular，还是Node系的后端框架比如Nest和Express，都在积极拥抱TS，希望以后整个生态会发展得越来越好吧~

总结

到此这篇关于在Vue.js中使用TypeScript的文章就介绍到这了,更多相关Vue.js使用TypeScript内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

在Vue.js中使用TypeScript的方法

{{msg}}

{{fullName}}

{{msg}}

{{test}}

随机推荐

在Vue.js中使用TypeScript的方法

{{msg}}

{{fullName}}

{{msg}}

{{test}}

热门推荐

随机推荐