使用typescript构建Vue应用的实现

一、Vue项目初始化-引入typescript

使用typescript构建Vue应用和使用js一样,都是通过vue-cli去初始化并创建一个vue项目,只不过使用typescript构建的时候要在脚手架问卷操作的时候勾选上typescript选项。

二、typescript Vue项目比较

使用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文件进行类型校验,其具体内容如下:

declare module '*.vue' { import Vue from 'vue' export default Vue }

⑤ 新增了一个shims-tsx.d.ts文件,其作用就是为了能够解析.tsx文件,对.tsx文件进行类型校验,其具体内容如下:

import Vue, { VNode } from 'vue' declare global { namespace JSX { interface Element extends VNode {} interface ElementClass extends Vue {} interface IntrinsicElements { [elem: string]: any } } }

⑥ 当然还会新增一个ts.config文件,这个是typescript的配置文件,具体内容这里不作解释,请参考tsconfig文件详解

三、.vue文件内容格式与写法

使用typescript来写Vue应用,最主要的就是.vue文件,.vue文件写法上与js有些不同并且新增了一些装饰器,接着一步一步分析。

① 虽然.vue文件的格式和写法上有了不同,但这不同只是<script></script>部分发生了变化,<template></template>和<style></style>和原来是一样的,一个最简单.vue文件仍然可以使用如下写法:

// HelloWorld.vue <template> <div> hello world </div> </template>

② 在写<script></script>部分,第一点不同就是,<script>标签上要加上lang语言属性,表示其中的内容为ts,如:

<script lang="ts"> </script>

③ 默认export上的不同,使用js的时候,我们是直接通过export default {}导出一个Vue组件对象即可,但是使用ts的时候,我们必须导出一个类class,类名为组件名,同时这个类必须继承Vue,如:

// import Vue from "vue"; import { Component, Vue } from 'vue-property-decorator'; // 引入Vue及一些装饰器 @Component export default class App extends Vue { // 继承Vue并导出Vue组件 }

以上就是<sciprt>内容最基本的写法,上面继承的Vue不是直接从"vue"模块中引入,而是从"vue-property-decorator"即vue属性装饰器模块中引入,当然也可以通过vue模块引入import Vue from "vue",但是我们写.vue文件的时候通常要引入一些装饰器,同时这个装饰器类vue-property-decorator也提供了Vue,故可以直接从vue-property-decorator装饰器类上直接引入

④ 组件中data属性的写法,由于我们在.vue文件中声明了一个class,这个class就是Vue组件,我们可以直接在这个class中声明属性即可,这些声明的属性就是之前使用js写时的data属性中的数据,如:

export default class App extends Vue { public lists = [ // 这里就是之前Vue组件的data属性 "Vue.js", "React.js", "Angular.js" ] }

⑤ 组件中的computed计算属性的写法,同样我们可以在class中声明get和set方法即可变成对应的computed属性,如:

export default class App extends Vue { public lists = [ // 这里就是之前Vue组件的data属性 "Vue.js", "React.js", "Angular.js" ] public get count() { // 通过get和set实现计算属性 return this.lists.length; } }

⑥ 组件中方法的声明更简单,直接在class中声明方法即可,如:

export default class App extends Vue { public say() { console.log("say"); } }

⑦ @Component装饰器的使用,@Component装饰器就是用来标识当前这个类是一个Vue组件,@Component装饰器还可以传递对象作为参数,这个传递的对象就是Vue组件实例,所以所有之前用js写法的时候,Vue组件支持的所有选项都可以传入,如:

@Component({ // 这里可以配置Vue组件支持的各种选项 components: { HelloWorld }, data() { return { a:1 } }, methods: { say(){ console.log("say"); } } }) export default class App extends Vue { }

@Component内容使用的是Vue.extend()方法,用于扩展Vue Component并生成Vue组件,这里需要注意的就是,Vue最终会将class中定义的属性和@Component中定义的属性进行合并,如果二者中定义了同名的属性,那么class中的优先级更高,即class中定义的会覆盖掉@Component中定义的同名属性,但是data除外,@Component中定义的同名的data数据会覆盖掉class中定义的同名data属性,如:

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/bf3391fa99d30dd3fc47311fb1846f77.html