使用typescript构建Vue应用的实现
一、Vue项目初始化-引入typescript
使用typescript构建Vue应用和使用js一样，都是通过vue-cli去初始化并创建一个vue项目，只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。
二、typescriptVue项目比较
使用typescript构建的Vue项目发生了一些变化:
①main.js变成了main.ts，但是main.ts中的内容和main.js的内容是一模一样的。
②router.js变成了router.ts，但是router.ts中的内容和router.js中的内容也是一模一样的。
③store.js变成了store.ts，但是store.ts中的内容和store.ts中的内容也是一模一样的。
因为typescript是javascript的超集，所以ts完全兼容js。
④新增了一个shims-vue.d.ts声明文件，这个文件的作用就是让typescript能够识别.vue文件，在引入"*.vue"文件的时候，会将其标识为一个Vue组件，才能对.vue文件进行类型校验，其具体内容如下:
declaremodule'*.vue'{
importVuefrom'vue'
exportdefaultVue
}
⑤新增了一个shims-tsx.d.ts文件，其作用就是为了能够解析.tsx文件，对.tsx文件进行类型校验，其具体内容如下:
importVue,{VNode}from'vue'
declareglobal{
namespaceJSX{
interfaceElementextendsVNode{}
interfaceElementClassextendsVue{}
interfaceIntrinsicElements{
[elem:string]:any
}
}
}
⑥当然还会新增一个ts.config文件，这个是typescript的配置文件，具体内容这里不作解释，请参考tsconfig文件详解
三、.vue文件内容格式与写法
使用typescript来写Vue应用，最主要的就是.vue文件，.vue文件写法上与js有些不同并且新增了一些装饰器，接着一步一步分析。
①虽然.vue文件的格式和写法上有了不同，但这不同只是部分发生了变化，和和原来是一样的，一个最简单.vue文件仍然可以使用如下写法:
//HelloWorld.vuehelloworld
②在写部分，第一点不同就是，
③默认export上的不同，使用js的时候，我们是直接通过exportdefault{}导出一个Vue组件对象即可，但是使用ts的时候，我们必须导出一个类class，类名为组件名，同时这个类必须继承Vue，如:
//importVuefrom"vue";
import{Component,Vue}from'vue-property-decorator';//引入Vue及一些装饰器
@Component
exportdefaultclassAppextendsVue{//继承Vue并导出Vue组件
}
以上就是
④组件中data属性的写法，由于我们在.vue文件中声明了一个class，这个class就是Vue组件，我们可以直接在这个class中声明属性即可，这些声明的属性就是之前使用js写时的data属性中的数据，如:
exportdefaultclassAppextendsVue{
publiclists=[//这里就是之前Vue组件的data属性
"Vue.js","React.js","Angular.js"
]
}
⑤组件中的computed计算属性的写法，同样我们可以在class中声明get和set方法即可变成对应的computed属性，如:
exportdefaultclassAppextendsVue{
publiclists=[//这里就是之前Vue组件的data属性
"Vue.js","React.js","Angular.js"
]
publicgetcount(){//通过get和set实现计算属性
returnthis.lists.length;
}
}
⑥组件中方法的声明更简单，直接在class中声明方法即可，如:
exportdefaultclassAppextendsVue{
publicsay(){
console.log("say");
}
}
⑦@Component装饰器的使用，@Component装饰器就是用来标识当前这个类是一个Vue组件，@Component装饰器还可以传递对象作为参数，这个传递的对象就是Vue组件实例，所以所有之前用js写法的时候，Vue组件支持的所有选项都可以传入，如:
@Component({
//这里可以配置Vue组件支持的各种选项
components:{
HelloWorld
},
data(){
return{
a:1
}
},
methods:{
say(){
console.log("say");
}
}
})
exportdefaultclassAppextendsVue{
}
@Component内容使用的是Vue.extend()方法，用于扩展VueComponent并生成Vue组件，这里需要注意的就是，Vue最终会将class中定义的属性和@Component中定义的属性进行合并，如果二者中定义了同名的属性，那么class中的优先级更高，即class中定义的会覆盖掉@Component中定义的同名属性，但是data除外，@Component中定义的同名的data数据会覆盖掉class中定义的同名data属性，如:
@Component({
data(){
bar:1
},
methods:{
say(){
console.log("say::@Component");
}
}
})
exportdefaultclassAppextendsVue{
publicbar:number=2;//这里的bar会被@Component中定义的bar覆盖掉
publicsay(){//这里的say()方法会覆盖掉@Component中定义的say方法
console.log("say::class");
}
}
还有一点要注意的是，@Component装饰器千万不要漏写，必须在组件类class前修饰
⑧props属性的写法，使用ts写Vue组件的时候，如果要在组件上定义props属性，那么必须通过@Prop()装饰器，其实就是在定义组件data属性的时候用@Prop()装饰器进行修饰，如果没有通过@Propp()进行修饰，那么定义的属性就是组件的data属性，可以给@Prop()传递一个配置对象，可以定义传递属性的default、required、type等属性，如:
import{Component,Vue,Prop}from'vue-property-decorator';
@Component//不要忘了用@Component修饰组件class哟
exportdefaultclassHelloWorldextendsVue{
@Prop()publicbar!:string;//这里定义的是props属性
publicfoo="foo";//这里定义的是data属性
@Prop({type:String,default:"foo",required:true})publicfoo!:string;
}
需要注意的是，publicfoo!:string，这里声明的string类型是不起作用的，要限定父组件传入的foo属性的数据类型，必须在@Prop()装饰器内限定数据类型，否则无效
⑨@Emit()装饰器的使用，在子组件发射自定义事件的时候通常会通过this.$emit("say")的方式，但是typescript提供了一个@Emit()装饰器，用于修饰一个方法，当这个方法被执行的时候，就会在方法执行完成后发射一个同方法名的事件出去，当然，这是在没有给@Emit()传递参数的情况下，如果给@Emit()传递了参数，那么就会发射指定参数的事件，如:
exportdefaultclassHelloWorldextendsVue{
@Emit()//在say()方法执行完成后会发射一个同方法名的say事件
publicsay(){
}
@Emit("speak")//这里给@Emit()传递了参数，则会发射speak事件
publicsay(){
}
}
⑩@Watch()装饰器的使用，其拥有监听组件中数据的变化，就相当于$watch，需要给其传递一个字符串参数，表示其监听的是哪个数据的变化，如:
@Watch("foo")//监听this.foo的变化
publicadd(newValue:number,oldValue:number){
console.log(`newValueis${newValue},oldValueis${oldValue}`);
}
四、vuex中的变化
vuex中的数据是存放在state属性上的，如果要限定state中数据的属性和类型，那么我们必须在创建store对象的时候定义一个接口限定一下数据类型，如:
interfaceIState{
lists:string[]
}
exportdefaultnewVuex.Store({
state:{
lists:["vue"]//定义了state的数据结构，必须要有lists属性，并且属性值为string[]
}
});
获取vuex中的数据时候，还是可以通过this.$store.state.lists获取到，但是我们也可以通过装饰器获取到，要使用vuex的装饰器，我们需要安装vuex-class，如:
import{State,Mutation,Action}from"vuex-class";
exportdefaultclassAppextendsVue{
//将从vuex中获取到的lists数据保存到组件的lists属性上
@State("lists")publiclists!:string[];
@Mutation("say")//在say()方法前修饰，当say()方法执行的时候就会提交一个saymutation
publicsay(){
console.log("say1");
}
@Action("speak")//在speak()方法前修饰，当speak()方法执行的时候就会提交一个speakaction
publicspeak(){
}
publicmounted(){
this.say();
this.speak();
}
}
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。