TypeScript在Vue中的尝试

Vue官方文档中，对TypeScript做支持，目前我们可以使用TypeScript的语法，进行Vue项目的开发。
https://cn.vuejs.org/v2/guide/typescript.html

vue-class-component介绍

这个插件是vue官方维护的插件，目前支持基于class的语法规则。

1、直接在类中申明data数据。
旧的方式：

export default {
	data: function() {
		return { 
			message: "mapbar_front"
		}
	}
}

使用class的方式

import Component from 'vue-class-component'

@Component({});
export default class Login extends Vue {
	message = "mapbar_front";
}

2、props属性
旧的方式，对props的使用：

export default {
	props: ['propsMsg']
}

使用class的方式，直接在修饰器中进行申明：

import Component from 'vue-class-component'

@Component({
	props: {
		propsMsg: String
	}
});
export default class Login extends Vue {
	message = "mapbar_front";
}

3、组件的普通函数、周期函数问题
旧的组件描述的方式中，周期函数直接写在组件属性上，而普通函数，则是写在组件的methods属性中，统一管理。

export default {
	// 这是组件的周期函数
	created: function() { 
		console.log('created')
	},
	methods: { 
		// 这是普通函数
		getUserInfo: function() { 
			// request请求
		}
	}
}

在class方式的类中，无论是钩子函数，还是普通函数，一律是class的成员函数中：

@Component
export default class Login extends Vue{
	created () {
		console.log('created!');
	}
	getUserInfo: function() { 
		// request请求
	}
}

4、计算属性问题
旧的方式中，计算属性专门在computed属性中来实现。

export default {
	data: function() {
		return { 
			name: 'mapbar_front'
		}
	},
	computed: { 
		computedName: function() { 
			return this.name
		}
	}
}

在class的方式中，使用getter、setter的方式，来实现computed的操作。

@Component
export default class Login extends Vue{
	name = "mapbar_front"
	get computedName () {
		return this.name;
	}
}

5、关于混入mixins
就的方式的混入,是提前定义好混入对象。

let mymixin = {
	data: function() {
		return { 
			name: "mapbar_front"
		}
	}
}
export default {
	mixins: [mymixin]
}

使用class的方式，是直接定义一个混入类。

import Vue from 'vue';
import Component, { mixin } from 'vue-class-component';

@Component
class MyMixins extends Vue {
	name = "mapbar_front";
}

export default class Login extends mixin(MyMixins) {
	created: function() {
		console.log(123);
	}
}

关于class方式的vue写法的不足。

1、虽然这样的方式，解决了大部分的vue项目开发的问题，但是假如我们想操作dom，一般使用的是ref的方式，但是class的方式是不支持直接访问ref所代表的dom的。所以这样的方式，还是有不足的地方。

2、TypeScript的方式，支持的类型校验，在Vue的组件中，没有体现出来，这也是Vue本身的不足之处。