vue_ts ts环境搭建及ts格式写法-蒲公英云

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;
              }
            }
          }
        })