使用typescript构建Vue应用的实现


Posted in Javascript onAugust 26, 2019

一、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属性,如:

@Component({
  data() {
    bar: 1
  },
  methods: {
    say(){
     console.log("say::@Component");
    }
  }
})
export default class App extends Vue {
  public bar: number = 2; // 这里的bar会被@Component中定义的bar覆盖掉
  public say() { // 这里的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哟
export default class HelloWorld extends Vue {
  @Prop() public bar!: string; // 这里定义的是props属性
  public foo = "foo"; // 这里定义的是data属性
  @Prop({type: String, default:"foo", required: true}) public foo!: string;
}
</script>

需要注意的是,public foo!: string,这里声明的string类型是不起作用的,要限定父组件传入的foo属性的数据类型,必须在@Prop()装饰器内限定数据类型,否则无效

⑨ @Emit()装饰器的使用,在子组件发射自定义事件的时候通常会通过this.$emit("say")的方式,但是typescript提供了一个@Emit()装饰器,用于修饰一个方法,当这个方法被执行的时候,就会在方法执行完成后发射一个同方法名的事件出去,当然,这是在没有给@Emit()传递参数的情况下,如果给@Emit()传递了参数,那么就会发射指定参数的事件,如:

export default class HelloWorld extends Vue {
  @Emit() // 在say()方法执行完成后会发射一个同方法名的say事件
  public say() {
  }
  @Emit("speak") // 这里给@Emit()传递了参数,则会发射speak事件
  public say() {
  }
}

⑩ @Watch()装饰器的使用,其拥有监听组件中数据的变化,就相当于$watch,需要给其传递一个字符串参数,表示其监听的是哪个数据的变化,如:

@Watch("foo") // 监听this.foo的变化
public add(newValue: number, oldValue: number) {
 console.log(`newValue is ${newValue}, oldValue is ${oldValue}`);
}

四、vuex中的变化

vuex中的数据是存放在state属性上的,如果要限定state中数据的属性和类型,那么我们必须在创建store对象的时候定义一个接口限定一下数据类型,如:

interface IState {
 lists: string[]
}
export default new Vuex.Store<IState>({
  state: {
    lists: ["vue"] // 定义了state的数据结构,必须要有lists属性,并且属性值为string[]
  }
});

获取vuex中的数据时候,还是可以通过this.$store.state.lists获取到,但是我们也可以通过装饰器获取到,要使用vuex的装饰器,我们需要安装vuex-class,如:

import {State, Mutation, Action} from "vuex-class";
export default class App extends Vue {
  // 将从vuex中获取到的lists数据保存到组件的lists属性上
  @State("lists") public lists!: string[];
  @Mutation("say") // 在say()方法前修饰,当say()方法执行的时候就会提交一个say mutation
  public say() {
   console.log("say1");
  }
  @Action("speak") // 在speak()方法前修饰,当speak()方法执行的时候就会提交一个speak action
  public speak(){
  }
  public mounted () {
   this.say();
   this.speak();
  }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
JMenuTab简单使用说明
Mar 13 Javascript
一个简单的Ext.XTemplate的实例代码
Mar 18 Javascript
JQuery+Ajax实现数据查询、排序和分页功能
Sep 27 Javascript
JavaScript如何获取数组最大值和最小值
Nov 18 Javascript
AngularJS指令详解及示例代码
Aug 16 Javascript
微信小程序 wxapp地图 map详解
Oct 31 Javascript
html5+canvas实现支持触屏的签名插件教程
May 08 Javascript
简单实现JavaScript弹幕效果
Aug 27 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
js中document.write和document.writeln的区别
Mar 11 Javascript
Elementui表格组件+sortablejs实现行拖拽排序的示例代码
Aug 28 Javascript
微信小程序实现手势滑动卡片效果
Aug 26 #Javascript
微信小程序实现左侧滑栏过程解析
Aug 26 #Javascript
vue柱状进度条图像的完美实现方案
Aug 26 #Javascript
React传值 组件传值 之间的关系详解
Aug 26 #Javascript
js实现指定时间倒计时效果
Aug 26 #Javascript
Vue.use()在new Vue() 之前使用的原因浅析
Aug 26 #Javascript
微信小程序事件 bindtap bindinput代码实例
Aug 26 #Javascript
You might like
中英文字符串翻转函数
2008/12/09 PHP
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
php preg_match的匹配不同国家语言实例
2016/12/29 PHP
PHP常用算法和数据结构示例(必看篇)
2017/03/15 PHP
Laravel接收前端ajax传来的数据的实例代码
2017/07/20 PHP
PHP设计模式之策略模式原理与用法实例分析
2019/04/04 PHP
jquery ajax post提交数据乱码
2013/11/05 Javascript
window.open打开页面居中显示的示例代码
2013/12/27 Javascript
关于Javascript 对象(object)的prototype
2014/05/09 Javascript
你所未知的3种Node.js代码优化方式
2016/02/25 Javascript
全面解析Bootstrap中scrollspy(滚动监听)的使用方法
2016/06/06 Javascript
Javascript如何判断数据类型和数组类型
2016/06/22 Javascript
深入理解Webpack 中路径的配置
2017/06/17 Javascript
jQuery:unbind方法的使用详解
2017/08/14 jQuery
JavaScript中严格判断NaN的方法
2018/02/16 Javascript
浅谈React的最大亮点之虚拟DOM
2018/05/29 Javascript
如何让node运行es6模块文件及其原理详解
2018/12/11 Javascript
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python和C/C++交互的几种方法总结
2017/05/11 Python
tensorflow 获取变量&amp;打印权值的实例讲解
2018/06/14 Python
深入解析神经网络从原理到实现
2019/07/26 Python
Django的CVB实例详解
2020/02/10 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
Django缓存Cache使用详解
2020/11/30 Python
Python实现疫情地图可视化
2021/02/05 Python
英国殿堂级有机护肤品牌:Rodial
2017/04/17 全球购物
IRO美国官网:法国服装品牌
2018/03/06 全球购物
澳大利亚最便宜的网上药房:Chemist Warehouse
2020/01/30 全球购物
AOP的定义以及作用
2013/09/08 面试题
.net软件工程师应聘上机试题
2015/03/10 面试题
大学生个人推荐信范文
2013/11/25 职场文书
公司离职证明范本(5篇)
2014/09/17 职场文书
旅游局领导班子“四风”问题对照检查材料思想汇报
2014/09/29 职场文书
2015年事业单位工作总结
2015/04/27 职场文书
国庆节主题班会
2015/08/15 职场文书
2019数学教师下学期工作总结
2019/06/27 职场文书