在vue.js中如何使用typescript-mile米乐体育

这篇文章主要为大家展示了在vue.js中如何使用typescript，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带大家一起来研究并学习一下“在vue.js中如何使用typescript”这篇文章吧。

vue是什么软件

vue是一套用于构建用户界面的渐进式javascript框架，vue与其它大型框架的区别是，使用vue可以自底向上逐层应用，其核心库只关注视图层，方便与第三方库和项目整合，且使用vue可以采用单文件组件和vue生态系统支持的库开发复杂的单页应用。

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

创建项目

• 虽然github上有各种各样相关的starter，但是使用 vue cli 应该是目前相对比较好的方式，在使用 vue create 创建新项目时，对 preset 选择 manually select features 选项，之后添加 typescript

• 如果想在vue应用中完整使用es6中提供的类特性，那么在 class-style component syntax 处选择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”的内容，如果改文章对你有所帮助并觉得写得不错，劳请分享给你的好友一起学习新知识，若想了解更多相关知识内容，请多多关注恰卡编程网行业资讯频道。