vue之typescript配置和使用

vue之typescript配置和使用

目前笔者在找前端工程师工作（vue方向），发现许多公司都要求会使用TypeScript，花了一点时间把TypeScript看完了，今天将介绍vue中typescript使用

第一步，在创建项目时选中typescript，如下：
第二步，在安装装饰器来简化书写

npm install vue-class-component  vue-property-decorator

第三步，改写代码，将创建初始项目里面HelloWorld.vue里面写个简单计数器，代码如下：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
		<button @click="decrement"> - </button>
		{{count}}
		<button @click="increment"> + </button>
  </div>
</template>

<script lang="ts">
 import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

@Component
export default class HelloWorld extends Vue {
	public count:Number = 0
	@Prop() private msg: String | undefined
	
	public increment ():void {
		this.count++
	}
	public decrement ():void {
		this.count--
	}
}
</script>

第四步，改写Home.vue

<template>
  <div class="home">
    <HelloWorld msg="vue from TypeScript"/>
  </div>
</template>

<script lang="ts">
 import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";
import HelloWorld from '@/components/HelloWorld.vue'

@Component({
	components: {
		HelloWorld
	},
	beforeRouteLeave(to: any, from: any, next: any) {
		console.log('beforeRouteLeave');
		next();
	},
	beforeRouteEnter(to: any, from: any, next: any) {
		console.log('beforeRouteEnter');
		next();
	}
})
export default class Home extends Vue {
	
}
</script>

本文章只是简单说明vue中使用typescript，装饰器还有许多用法，可自行查阅