前言TypeScript是一个js超强，提供类型系统和es6支持，由微软开发，2012年10月发布第一个版本，经过多次更新，已经成为前端社区不可忽视的一股力量，在微软内部得到了广泛的应用。Google的angular2也是使用TypeScript开发语言，这也是我们学习ts背景的原因。我们常用的vue框架也支持使用typeScript开发。今天我们将学习如何使用vue-cli3+typeScript开发一个简单的项目。最近在研究腾讯的ai界面，完成一个简单的demo。话不多。贴一下代码1.创建项目1.安装vue-cli3，查看版本，创建项目，直接创建全局已经安装了vue-cli3的项目，和之前一样npminstall-g@vue/clivue--versionvue创建my-ts-ai2。需要注意的是，如果是第一次使用ts，可以选择Manuallyselectfeature来自由选择函数。常用的有vuex、vue-router、CSSPre-processors等，我们必须勾选typescript，回车On才能进行下一步。PS：勾选的操作是按空格键。需要注意的是，如果选择formatcheck，需要选择TSlint，否则写ts会标红并报错；3、创建成功后，执行启动命令：npmrunserve；启动后可以访问本地项目，用ts写代码2.vue-property-decorator这是一些覆盖vue的对象的集合，我们可以从这里取出一些东西import{Component,Prop,Vue,Watch}from'vue-属性-装饰器'；这几个取出来的Attributes分别是组件定义Component、父组件传递的参数Prop、原始Vue对象Vue、数据监听对象Watch。它还包括这里没有列出的Model、Emit、Inject、Provide，大家可以自行尝试。我们看一下经常使用的属性prop、watch一般写法prop;@Prop()privatemsg!:string;watch://watch@Watch('active')privatechageActive(newVal:string,oldVal:string){console.log(`将txt:${oldVal}更改为${newVal}`);}@Watch('sticker')privatechageSticker(newVal:string,oldVal:string){console.log(`changetxt:${oldVal}to${newVal}`);}data://dataprivatenum:number=0;私有appId：number=2140682408；私人应用凯：字符串='3gP0QJTqC3j8qP6M'；私有imgBase64：字符串=''；privateeffectImg:string='';methods:privatechoose(id:number,index:number){this.sticker=id;this.active=索引；}privatepostData(url:string,params:object){constself:IParams=this;axios.post(url,qs.stringify(params),{headers:{'Content-Type':'application/x-www-form-urlencoded'},}).then((response)=>{console.log(response.data);如果(response.data.ret===0){self.effectImg='data:image/jp例如;base64,'+response.data.data.image;}}).catch((error)=>{console.log(error);});}computed://computedgetgetMsg(){返回这个。味精+'11111';}gettestTxt(){returnthis.$store.state.testTxt;}3.vuex在store中的使用基本一样只要遵循ts的规则即可；主要是使用时的注意事项，废话不多说，直接上代码举例//Usevueximport{State,Getter,Action,Mutation,namespace,}from'vuex-class';constuserModule=namespace('user')声明@State('testNum')publictestNum!:any;@Action('UPDATA_CHANGE_LOGIN')publicUPDATA_CHANGE_LOGIN!:函数；@Mutation('CHANGE_LOGIN')publicCHANGE_LOGIN!:函数；@userModule.State('firstName')publicfirstName!:string;@userModule.State('lastName')publiclastName!:string;@userModule.Mutation('UPDATE_FIRST_NAME')publicUPDATE_FIRST_NAME!:函数然后像以前一样使用它；以上是我使用typeScript和vue-cli3框架编写的demo的要点；下面主要讲前端使用腾讯ai接口做一些效果；关于注册和创建应用，大家可以自己去网站上试试1.接口认证前端没有权限直接调用接口认证，因为有跨域问题，一般需要后台配合，所以如下代码可以使用nodejs开发；因为是在vue框架下开发的，vue帮我们做服务器代理，所以我们可以在本地配置代理服务器，看到效果，同时了解基本步骤，然后使用nodejs做接口认证；代码主要是签名算法，遵循腾讯的签名算法规则详见https://ai.qq.com/doc/auth.shtml签名算法步骤Sort
