Vue 2.x 如何接入

  • vue-property-decorator
  • vue-class-component
  • vuex-class

依赖

npm install —save-dev typescript webpack webpack-cli ts-loader css-loader vue vue-loader vue-template-compiler

webpack.config.js

  1. var path = require('path')
  2. var webpack = require('webpack')
  3. const VueLoaderPlugin = require('vue-loader/lib/plugin')
  5. module.exports = {
  6.   entry: './src/index.ts',
  7.   output: {
  8.     path: path.resolve(__dirname, './dist'),
  9.     publicPath: '/dist/',
  10.     filename: 'build.js'
  11.   },
  12.   module: {
  13.     rules: [
  14.       {
  15.         test: /\.vue$/,
  16.         loader: 'vue-loader',
  17.         options: {
  18.           loaders: {
  19.             // Since sass-loader (weirdly) has SCSS as its default parse mode, we map
  20.             // the "scss" and "sass" values for the lang attribute to the right configs here.
  21.             // other preprocessors should work out of the box, no loader config like this necessary.
  22.             'scss': 'vue-style-loader!css-loader!sass-loader',
  23.             'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax',
  24.           }
  25.           // other vue-loader options go here
  26.         }
  27.       },
  28.       {
  29.         test: /\.tsx?$/,
  30.         loader: 'ts-loader',
  31.         exclude: /node_modules/,
  32.         options: {
  33.           appendTsSuffixTo: [/\.vue$/],
  34.         }
  35.       },
  36.       {
  37.         test: /\.(png|jpg|gif|svg)$/,
  38.         loader: 'file-loader',
  39.         options: {
  40.           name: '[name].[ext]?[hash]'
  41.         }
  42.       },
  43.       {
  44.         test: /\.css$/,
  45.         use: [
  46.           'vue-style-loader',
  47.           'css-loader'
  48.         ]
  49.       }
  50.     ]
  51.   },
  52.   resolve: {
  53.     extensions: ['.ts', '.js', '.vue', '.json'],
  54.     alias: {
  55.       'vue$': 'vue/dist/vue.esm.js'
  56.     }
  57.   },
  58.   devServer: {
  59.     historyApiFallback: true,
  60.     noInfo: true
  61.   },
  62.   performance: {
  63.     hints: false
  64.   },
  65.   devtool: '#eval-source-map',
  66.   plugins: [
  67.     // make sure to include the plugin for the magic
  68.     new VueLoaderPlugin()
  69.   ]
  70. }
  72. if (process.env.NODE_ENV === 'production') {
  73.   module.exports.devtool = '#source-map'
  74.   // http://vue-loader.vuejs.org/en/workflow/production.html
  75.   module.exports.plugins = (module.exports.plugins || []).concat([
  76.     new webpack.DefinePlugin({
  77.       'process.env': {
  78.         NODE_ENV: '"production"'
  79.       }
  80.     }),
  81.     new webpack.optimize.UglifyJsPlugin({
  82.       sourceMap: true,
  83.       compress: {
  84.         warnings: false
  85.       }
  86.     }),
  87.     new webpack.LoaderOptionsPlugin({
  88.       minimize: true
  89.     })
  90.   ])
  91. }

tsconfig.json

使用 tsc —init 生成 tsconfig.json

  1. {
  2.     "compilerOptions": {
  3.         "outDir": "./built/",
  4.         "sourceMap": true,
  5.         "strict": true,
  6.         "noImplicitReturns": true,
  7.         "module": "es2015",
  8.         "moduleResolution": "node",
  9.         "target": "es5"
  10.     },
  11.     "include": [
  12.         "./src/**/*"
  13.     ]
  14. }

helloComponent.ts

  1. // src/components/Hello.ts
  3. import Vue from "vue";
  5. export default Vue.extend({
  6.     template: `
  7.         <div>
  8.             <div>Hello {{name}}{{exclamationMarks}}</div>
  9.             <button @click="decrement">-</button>
  10.             <button @click="increment">+</button>
  11.         </div>
  12.     `,
  13.     props: ['name', 'initialEnthusiasm'],
  14.     data() {
  15.         return {
  16.             enthusiasm: this.initialEnthusiasm,
  17.         }
  18.     },
  19.     methods: {
  20.         increment() { this.enthusiasm++; },
  21.         decrement() {
  22.             if (this.enthusiasm > 1) {
  23.                 this.enthusiasm--;
  24.             }
  25.         },
  26.     },
  27.     computed: {
  28.         exclamationMarks(): string {
  29.             return Array(this.enthusiasm + 1).join('!');
  30.         }
  31.     }
  32. });

使用单文件组件

告诉 TypeScript .vue文件在导入时是什么样子，新增 vue-shim.d.ts 文件。

我们不需要将该文件导入到任何地方。

它自动包含在 TypeScript 中，并告诉它导入的以 . Vue 结尾的任何内容与 Vue 构造函数本身具有相同的形状。

  1. // src/vue-shims.d.ts
  3. declare module "*.vue" {
  4.     import Vue from "vue";
  5.     export default Vue;
  6. }

第一个单文件组件

  1. <!-- src/components/Hello.vue -->
  3. <template>
  4.     <div>
  5.         <div class="greeting">Hello {{name}}{{exclamationMarks}}</div>
  6.         <button @click="decrement">-</button>
  7.         <button @click="increment">+</button>
  8.     </div>
  9. </template>
  11. <script lang="ts">
  12. import Vue from "vue";
  14. export default Vue.extend({
  15.     props: ['name', 'initialEnthusiasm'],
  16.     data() {
  17.         return {
  18.             enthusiasm: this.initialEnthusiasm,
  19.         }
  20.     },
  21.     methods: {
  22.         increment() { this.enthusiasm++; },
  23.         decrement() {
  24.             if (this.enthusiasm > 1) {
  25.                 this.enthusiasm--;
  26.             }
  27.         },
  28.     },
  29.     computed: {
  30.         exclamationMarks(): string {
  31.             return Array(this.enthusiasm + 1).join('!');
  32.         }
  33.     }
  34. });
  35. </script>
  37. <style>
  38. .greeting {
  39.     font-size: 20px;
  40. }
  41. </style>

使用装饰器

组件也可以使用装饰器来定义。

在两个附加包的帮助下(vue-class-component和vue-property-decorator)，我们的组件可以按照以下方式重写:

  1. import { Vue, Component, Prop } from "vue-property-decorator";
  3. @Component
  4. export default class HelloDecorator extends Vue {
  5.     @Prop() name!: string;
  6.     @Prop() initialEnthusiasm!: number;
  8.     enthusiasm = this.initialEnthusiasm;
  10.     increment() {
  11.         this.enthusiasm++;
  12.     }
  13.     decrement() {
  14.         if (this.enthusiasm > 1) {
  15.             this.enthusiasm--;
  16.         }
  17.     }
  19.     get exclamationMarks(): string {
  20.         return Array(this.enthusiasm + 1).join('!');
  21.     }
  22. }

vue-class-component


vue-class-component 对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法之后更加扁平化：**

  1. <template>
  2.   <div>
  3.     <input v-model="msg">
  4.     <p>prop: {{propMessage}}</p>
  5.     <p>msg: {{msg}}</p>
  6.     <p>helloMsg: {{helloMsg}}</p>
  7.     <p>computed msg: {{computedMsg}}</p>
  8.     <button @click="greet">Greet</button>
  9.   </div>
  10. </template>
  12. <script>
  13. import Vue from 'vue'
  14. import Component from 'vue-class-component'
  16. @Component({
  17.   props: {
  18.     propMessage: String
  19.   }
  20. })
  21. export default class App extends Vue {
  22.   // initial data
  23.   msg = 123
  25.   // use prop values for initial data
  26.   helloMsg = 'Hello, ' + this.propMessage
  28.   // lifecycle hook
  29.   mounted () {
  30.     this.greet()
  31.   }
  33.   // computed
  34.   get computedMsg () {
  35.     return 'computed ' + this.msg
  36.   }
  38.   // method
  39.   greet () {
  40.     alert('greeting: ' + this.msg)
  41.   }
  42. }
  43. </script>

vue-property-decorator

vue-property-decorator 是在 vue-class-component 基础上增强了更多的结合 Vue 特性的装饰器，新增了这 7 个装饰器

  • @Emit 指定事件 emit，可以使用此修饰符，也可以直接使用 this.$emit()
  • @Inject 指定依赖注入）
  • @Mixins mixin 注入
  • @Model 指定 model
  • @Prop 指定 Prop
  • @Provide 指定 Provide
  • @Watch 指定 Watch
  • @Component export from vue-class-component

Vue 2.x + TypeScript - 图1

  1. import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
  3. @Component
  4. export class MyComponent extends Vue {
  6.   @Prop()
  7.   propA: number = 1
  9.   @Prop({ default: 'default value' })
  10.   propB: string
  12.   @Prop([String, Boolean])
  13.   propC: string | boolean
  15.   @Prop({ type: null })
  16.   propD: any
  18.   @Watch('child')
  19.   onChildChanged(val: string, oldVal: string) { }
  20. }
  22. // 相当于
  23. export default {
  24.   props: {
  25.     checked: Boolean,
  26.     propA: Number,
  27.     propB: {
  28.       type: String,
  29.       default: 'default value'
  30.     },
  31.     propC: [String, Boolean],
  32.     propD: { type: null }
  33.   }
  34.   methods: {
  35.     onChildChanged(val, oldVal) { }
  36.   },
  37.   watch: {
  38.     'child': {
  39.       handler: 'onChildChanged',
  40.       immediate: false,
  41.       deep: false
  42.     }
  43.   }
  44. }

文件样式指南

api 顺序

vue 文件中 TS 上下文顺序

  • data
  • @Prop
  • @State
  • @Getter
  • @Action
  • @Mutation
  • @Watch
  • 生命周期钩子
    • beforeCreate（按照生命周期钩子从上到下）
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • activated
    • deactivated
    • beforeDestroy
    • destroyed
    • errorCaptured（最后一个生命周期钩子）

vuex

store 下面一个文件夹对应一个模块，每一个模块都有一个 interface 进行接口管理

Vue 大型 TS 项目实践经验

1 业务层面千万做好类型检测或者枚举定义，这样不仅便利了开发，还能在出了问题的时候迅速定位 2 如果定义了 .d.ts 文件，请重新启动服务让你的服务能够识别你定义的模块，并重启 vscode 让编辑器也能够识别 3 设置好你的 tsconfig ，比如记得把 strictPropertyInitialization 设为 false，不然你定义一个变量就必须给它一个初始值 4 跨模块使用 vuex，请直接使用 rootGetters

拓展vue 的声明 增强类型 支持this.$http这种写法

image.png

什么时候建议用 TypeScript

  • 大型项目
  • 项目生命周期长
  • 团队成员接受程度高
  • 项目是框架、库