vue_ts ts环境搭建及ts格式写法

1、搭建环境
	方式一:
		vue ui手动配置->添加项目->手动配置
		->添加Babel、Typescript、使用配置文件,其他选择自定义
		->选择css预处理器和Eslint
	
	方式二:
		vue create 项目名创建
		选择手动配置,可添加typescript
			空格添加,回车下一步
	
	方式三:手动创建
		(1)下载
			cnpm install -D vue 无需下载@types文件
			
		(2)编写vue声明文件,避免导入vue组件报错
			declare module '*.vue' {
			    import Vue from 'vue'
			    export default Vue	导出Vue构造器
			}
		(3)配置webpack
			const HtmlWebpackPlugin = require('html-webpack-plugin')
			const VueLoaderPlugin = require('vue-loader/lib/plugin')
			
			module.exports = {
			    entry: {
			        'app': './src/index.ts'
			    },
			    output: {
			        filename: '[name].[chunkhash:8].js'
			    },
			    resolve: {
			        extensions: ['.js', '.ts', '.tsx', 'vue'],
			        alias: {
			            'vue': 'vue/dist/vue.esm.js'	 引入能解析template的完整es6版本
			        }
			    },
			    module: {
			        rules: [
			            {
			                test: /\.vue$/,
			                loader: 'vue-loader'
			            },
			            {
			                test: /\.tsx?$/,
			                use: [{
			                    loader: 'ts-loader',
			                    options: {
			                        appendTsSuffixTo: [/\.vue$/]  往vue文件后面添加ts后缀
			                    }
			                }],
			                exclude: /node_modules/
			            },
			            {
			                test: /\.css$/,
			                use: [
			                  'vue-style-loader',
			                  'css-loader'
			                ]
			            }
			        ]
			    },
			    plugins: [
			        new HtmlWebpackPlugin({
			            template: './src/tpl/index.html'
			        }),
			        new VueLoaderPlugin()	使用vue-loader需要添加插件
			    ],
			    optimization: {
			        splitChunks: {
			            chunks: 'all'
			        }
			    }
			}

2、类型约束
	(1)props参数约束:
	
		import Vue, { PropType } from 'vue'

		interface ComplexMessage { 
		  title: string,
		  okMessage: string,
		  cancelMessage: string
		}
		const Component = Vue.extend({
		  props: {
		    name: String,	可以直接写约束条件
		    success: { type: String },
		    callback: { 
		      type: Function as PropType<() => void>	可以通过PropType定义复杂类型约束条件
		    },
		    message: {
		      type: Object as PropType<ComplexMessage>,
		      required: true,
		      validator (message: ComplexMessage) {	自定义验证规则
		        return !!message.title;
		      }
		    }
		  }
		})