这篇在介绍实例选项的ts写法时，会给出js的写法以作对比，同时也会给出选项的风格指南，保持良好的代码规范。

基本用法

vue结合typescript，有两种写法。

Vue.extend

  1. <script>
  2. import Vue from 'vue'
  3. const Component = Vue.extend({
  4.   data: () => ({...}),
  5.   methods: {...},
  6. })
  7. </script>

Vue.extend学习成本最低，现有写法的基础上，学习成本几乎为0。但是对ts的支持不佳。这就意味着会出现丢失代码提示、类型检查、编译报错等问题。

vue-class-component（推荐）

  1. <script lang="ts">
  2. // vue-property-decorator 库强依赖于 vue-class-component 库
  3. import { Component, Vue } from 'vue-property-decorator'
  5. // @Component 修饰符注明了此类为一个 Vue 组件
  6. @Component({
  7.   // 所有的组件选项都可以放在这里，与原写法类似
  8.   components: {...},
  9. })
  10. export default class ComponentName extends Vue {
  11.   // 初始数据可以直接声明为实例的 property
  12.   public message: string = 'Hello!'
  14.   // 组件方法也可以直接声明为实例的方法
  15.   public onClick (): void {
  16.     window.alert(this.message)
  17.   }
  18.   // ...
  19. }
  20. </script>

Vue与typescript结合的第二种方法，推荐使用该写法。
基于 vue-property-decorator 和 vuex-class 提供的装饰器，可以很好的与typescript结合。
注： vue-property-decorator 强依赖于 vue-class-component

vue-class-component 写法区别与风格指南

下面介绍 .vue 文件中 vue-class-component 风格的ts写法与普通js写法的区别。同时介绍应该注意的事项和风格指南。

script标签

示例 - js：

  1. <script>
  2. </script>

示例 - ts：

  1. <script lang="ts">
  2. </script>

name 组件名

示例 - js：

  1. // js
  2. export default {
  3.   name: "TodoList",
  4. }

示例 - ts：

  1. // ts
  2. import { Component, Vue } from "vue-property-decorator";
  4. @Component
  5. export default class TodoList extends Vue {}

风格指南：

  • name属性应该采用大驼峰 PascalCase 的形式命名。
  • ts写法在导出class时一定要带上命名，不要写匿名组件，在编写指令或者其他组件时，可能会遇到不可预计的影响

    components 引入组件

    示例 - js：

    ```javascript // js import HelloWorld from “@/components/HelloWorld.vue”;

export default { components: { HelloWorld } }

  1. <a name="jbrfo"></a>
  2. ### 示例 - ts：
  3. ```typescript
  4. // ts
  5. import { Component, Vue } from "vue-property-decorator";
  6. // 注意不能省略.vue的后缀。因为在shims-vue.d.ts中声明扩展的模块是 "*.vue"
  7. import HelloWorld from "@/components/HelloWorld.vue";
  9. @Component({
  10.   components: {
  11.     HelloWorld
  12.   }
  13. })
  14. export default class App extends Vue {}

导入的组件放在 @Component 的装饰器中。

data 组件数据

示例 - js：

  1. // js
  2. export default {
  3.   data: () => ({
  4.     user: {
  5.       name: 'Li Lei',
  6.       age: 18,
  7.     },
  8.     loading: false,
  9.     list: []
  10.   })
  11. }

示例 - ts：

  1. // ts
  2. import { Component, Vue } from "vue-property-decorator";
  4. @Component
  5. export default class App extends Vue {
  6.   public user = {
  7.     name: 'Li Lei',
  8.     age: 18,
  9.   }
  10.   public loading = false
  11.   public list: unknown[] = []
  12. }

风格指南：

在ts的类中，不写public默认为public。建议还是都写上，便于一眼区分类别。至于public、private、readonly等在何时使用，在后面会讲到。

computed 计算属性

示例 - js：

  1. // js
  2. export default {
  3.   data: () => ({
  4.     num1: 1,
  5.     num2: 1,
  6.   }),
  7.   computed: {
  8.     // 普通计算属性
  9.     totalCount() {
  10.       return this.num1 + this.num2
  11.     },
  13.     // get、set计算属性
  14.     numCalc: {
  15.       get() {
  16.         return this.num2 + 10
  17.       },
  18.       set(val) {
  19.         this.num2 = val - 10
  20.       },
  21.     },
  22.   },
  23. }

示例 - ts：

  1. // ts
  2. import { Component, Vue } from "vue-property-decorator";
  4. @Component
  5. export default class App extends Vue {
  6.   public num1 = 1
  7.   public num2 = 1
  9.   // 普通计算属性
  10.   private get totalCount() {
  11.     return this.num1 + this.num2
  12.   }
  14.   // get、set版计算属性
  15.   private get numCalc() {
  16.     return this.num2 + 10
  17.   }
  18.   private set numCalc(val) {
  19.     this.num2 = val - 10
  20.   }
  21. }

风格指南：

计算属性主要是一个名词，因此不要用动词作为函数的命名。

推荐如：totalCount, fullName 等

methods 方法

示例 - js：

  1. // js
  2. export default {
  3.   methods: {
  4.     consoleNumber() {
  5.       console.log(123)
  6.     },
  7.   },
  8. }

示例 - ts：

  1. // ts
  2. @Component
  3. export default class App extends Vue {
  4.   public consoleNumber() {
  5.     console.log(123)
  6.   }
  7. }

filters 过滤器

示例 - js：

  1. // js
  2. export default {
  3.   filters: {
  4.     formatValue(val) {
  5.       return val + 10
  6.     },
  7.   },
  8. }

示例 - ts：

  1. // ts
  2. @Component({
  3.   filters: {
  4.     formatValue(val) {
  5.       return val + 10
  6.     },
  7.   },
  8. })
  9. export default class App extends Vue {}

风格指南：

filters的函数命名推荐为 format + 要过滤的val。

如： formatCreateTime 等。

watch 监听

示例 - js：

  1. export default {
  2.   data: () => ({
  3.     num: 10,
  4.     user: {
  5.       age: 10,
  6.     },
  7.   }),
  8.   watch: {
  9.     num(newValue, oldValue) {
  10.       console.log('newValue', newValue)
  11.       console.log('oldValue', oldValue)
  12.     },
  13.     'user.age': function(newValue, oldValue) {
  14.       console.log('newValue', newValue)
  15.       console.log('oldValue', oldValue)
  16.     },
  17.     user: {
  18.       immediate: true,
  19.       deep: true,
  20.       handler(newValue, oldValue) {
  21.         console.log('newValue', newValue)
  22.         console.log('oldValue', oldValue)
  23.       },
  24.     },
  25.   },
  26. }

示例 - ts：

  1. // ts
  2. import { Component, Vue, Watch } from 'vue-property-decorator'
  4. @Component
  5. export default class App extends Vue {
  6.   public num = 10
  7.   public user = {
  8.     age: 10,
  9.   }
  11.   @Watch('num')
  12.   onNumChange(newVal: number, oldVal: number) {
  13.     console.log('newVal', newVal)
  14.     console.log('oldVal', oldVal)
  15.   }
  17.   @Watch('user.age')
  18.   onUserAgeChange(newVal: number, oldVal: number) {
  19.     console.log('newVal', newVal)
  20.     console.log('oldVal', oldVal)
  21.   }
  23.   @Watch('user', { immediate: true, deep: true })
  24.   onUserChange(newVal: { age: number }, oldVal: { age: number }) {
  25.     console.log('oldVal', oldVal)
  26.     console.log('newVal', newVal)
  27.   }
  28. }

风格指南：

watch需要依赖于装饰器。@Watch()第一个参数为要监听的属性。第二个参数是一个object，用于设置deep等参数。

下面紧跟一个函数，函数的命名推荐使用小驼峰，以on开头，Change结尾：onXXXChange

Prop

示例 - js：

  1. // js
  2. export default {
  3.   props: {
  4.     propA: { type: Number, default: 1 },
  5.     propB: { type: [String, Number], default: '' },
  6.     propC: { type: [Object, Array], default: () => ({}) },
  7.   },
  8. }

示例 - ts：

  1. // ts
  2. import { Component, Vue, Prop } from 'vue-property-decorator'
  4. @Component
  5. export default class App extends Vue {
  6.   @Prop({ type: Number, default: 1 })
  7.   readonly propA!: number
  8.   @Prop({ type: [String, Number], default: '' })
  9.   readonly propB!: string | number
  10.   @Prop({ type: [Object, Array], default: () => ({}) })
  11.   readonly propC!: object | unknown[]
  12. }

风格指南：

  • @Props装饰器里的参数与原Vue普通的写法一致
  • 声明prop字段前要加上readonly，以保持Vue中prop是单向数据流，不允许直接赋值与修改

  • prop装饰器内必须添加default默认值，声明时无需再赋值，后面要加上感叹号 ! 以告知ts编译器当前属性是非空的。

    Emit 自定义事件

    示例1 - js：

    1. export default {
    2. data() {
    3.   return {
    4.     count: 0,
    5.   }
    6. },
    7. methods: {
    8.   addToCount(n) {
    9.     this.count += n
    10.     // 将addToCount转成add-to-count
    11.     this.$emit('add-to-count', n)
    12.   },
    13.   resetCount() {
    14.     this.count = 0
    15.     this.$emit('reset')
    16.   },
    17.   returnValue() {
    18.     this.$emit('return-value', 10)
    19.   },
    20.   onInputChange(e) {
    21.     this.$emit('on-input-change', e.target.value)
    22.   },
    23.   handlePromise() {
    24.     const promise = new Promise((resolve) => {
    25.       setTimeout(() => {
    26.         resolve(20)
    27.       }, 0)
    28.     })
    30.     promise.then((value) => {
    31.       this.$emit('promise', value)
    32.     })
    33.   },
    34. },
    35. }

    示例1 - ts：

    ```typescript import { Vue, Component, Emit } from ‘vue-property-decorator’

@Component export default class YourComponent extends Vue { count = 0

@Emit() addToCount(n: number) { this.count += n }

@Emit(‘reset’) resetCount() { this.count = 0 }

@Emit() returnValue() { return 10 }

@Emit() onInputChange(e) { return e.target.value }

@Emit() handlePromise() { return new Promise((resolve) => { setTimeout(() => { resolve(20) }, 0) }) } }

  2. - @Emit装饰器接收一个可选参数，作为事件名；如果没有提供这个参数，$emit会将回调函数的camelCase(驼峰式)转为kebab-case（短横线命名），并将其作为事件名
  3. - @Emit会将回调函数的返回值作为第二个参数，如果返回值是一个Promise对象，$emit会将Promise对象状态为resolved之后触发
  4. - @Emit的回调函数的参数，会放在其返回值之后，一起被$emit当作参数使用
  5. - @Emit装饰器可以选择不传事件名，不返回处理的值，在里面添加业务处理。
  7. 但是为了能够让emit事件更加的清晰，以及与组件内业务代码的解耦，推荐如下写法：
  8. <a name="sDv3c"></a>
  9. ### 更好地写法：
  10. ```typescript
  11. import { Component, Vue, Emit } from 'vue-property-decorator'
  13. @Component
  14. export default class App extends Vue {
  15.   public count = 1
  17.   @Emit('add-to-count')
  18.   public emitAddToCount(val: number) {
  19.     return val
  20.   }
  21.   @Emit('reset')
  22.   public emitReset() {
  23.     return
  24.   }
  25.   @Emit('return-value')
  26.   public emitReturnValue(val: number) {
  27.     return val
  28.   }
  29.   @Emit('on-input-change')
  30.   public emitOnInputChange(e: Event) {
  31.     return (e.target as HTMLInputElement).value
  32.   }
  33.   @Emit('promise')
  34.   public emitPromise(val: unknown) {
  35.     return val
  36.   }
  38.   public addToCount(n: number) {
  39.     this.count += n
  40.     this.emitAddToCount(n)
  41.   }
  42.   public resetCount() {
  43.     this.count = 0
  44.     this.emitReset()
  45.   }
  46.   public handlePromise() {
  47.     const promise = new Promise(resolve => {
  48.       setTimeout(() => {
  49.         resolve(20)
  50.       }, 0)
  51.     })
  52.     promise.then(val => {
  53.       this.emitPromise(val)
  54.     })
  55.   }
  56. }

风格指南：

  • 明确每个emit接收的事件名
  • emit处理函数都以 emit 开头
  • emit处理函数声明仅接收参数和直接返回参数，避免与业务逻辑耦合
  • 若想传递多个参数，还是建议编写业务代码时，将多个参数作为一整个对象传递

    生命周期 Hook

    示例 - ts：

    ```typescript import { Component, Vue } from ‘vue-property-decorator’

@Component export default class App extends Vue { private beforeCreated() { console.log(‘beforeCreated’) } private created() { console.log(‘created’) } private beforeMount() { console.log(‘beforeMount’) } private mounted() { console.log(‘mounted’) } private beforeUpdate() { console.log(‘beforeUpdate’) } private updated() { console.log(‘updated’) } private beforeDestroy() { console.log(‘beforeDestroy’) } private destroyed() { console.log(‘destroyed’) } }

  1. <a name="vaDfU"></a>
  2. ## mixins 混入
  3. <a name="L5EBD"></a>
  4. ### 示例 - ts：
  5. <a name="XQXP9"></a>
  6. #### 创建 - FormMixins.ts
  7. ```typescript
  8. // mixins/FormMixins.ts
  9. import { Component, Mixins } from 'vue-property-decorator'
  11. @Component
  12. export default class FormMixins extends Mixins() {
  13.   public form = {
  14.     type: 1,
  15.     search: '搜索信息',
  16.   }
  18.   public logFormSearch() {
  19.     console.log(this.form.search)
  20.   }
  21. }
  23. // mixins/UserMixins.ts
  24. import { Component, Mixins } from 'vue-property-decorator'
  26. @Component
  27. export default class UserMixins extends Mixins() {
  28.   public user = {
  29.     name: '韩梅梅',
  30.     age: 18,
  31.   }
  33.   public logUserName() {
  34.     console.log(this.user.name)
  35.   }
  36. }

使用 - .vue

  1. // App.vue
  2. import { Component, Mixins } from 'vue-property-decorator'
  3. import FormMixins from '@/mixins/FormMixins'
  4. import UserMixins from '@/mixins/UserMixins'
  6. @Component
  7. export default class App extends Mixins(FormMixins, UserMixins) {
  8.   private mounted() {
  9.     this.logFormSearch() // 搜索信息
  10.     this.logUserName() // 韩梅梅
  11.   }
  12. }

风格指南：

  • mixins命名时要使用大驼峰命名
  • mixins命名以 Mixins 结尾

    directive 自定义指令

    示例 - ts：

    创建 - colorDirective.ts

    ```typescript // colorDirective.ts // 获取类型提示 import { DirectiveOptions } from ‘vue’

const directive: DirectiveOptions = { inserted(el, node) { /**

  1.  * Using value:
  2.  * v-color={color: 'red', backgroundColor: 'blue'}
  3.  */
  4. if (node.value) {
  5.   el.style.backgroundColor = node.value.backgroundColor
  6.   el.style.color = node.value.color
  7. }
  9. /**Using modifiers:
  10.  * v-color.color
  11.  * v-color.backgroundColor
  12.  */
  13. if (node.modifiers.color) {
  14.   el.style.color = node.value
  15. }
  17. if (node.modifiers.backgroundColor) {
  18.   el.style.backgroundColor = node.value
  19. }

}, }

export default directive

  1. <a name="VgTON"></a>
  2. #### 使用 - .vue
  3. ```vue
  4. // App.vue
  5. <template>
  6.   <div id="app">
  7.     <h1 v-color="{color: 'red', backgroundColor: 'blue'}">
  8.       about
  9.     </h1>
  10.   </div>
  11. </template>
  13. <script lang="ts">
  14. import { Component, Vue } from 'vue-property-decorator'
  15. import colorDirective from '@/directive/colorDirective'
  17. @Component({
  18.   directives: {
  19.     color: colorDirective,
  20.   },
  21. })
  22. export default class App extends Vue {}
  23. </script>

风格指南：

自定义指令用法与普通Vue的指令用法相同，写在@Component装饰器中。
类型提示仅在封装directives时。

provide 和 inject

示例 - js：

  1. // js
  2. // 祖先组件 - Todo.vue
  3. import TodoListItem from '@/components/TodoListItem.vue'
  5. export default {
  6.   components: { TodoListItem },
  7.   provide: () => ({
  8.     userId: 1,
  9.     userName: '韩梅梅',
  10.   }),
  11. }
  13. // 孙组件 - TodoListItem.vue
  14. export default {
  15.   name: 'TodoListItem',
  16.   inject: {
  17.     todoUserName: {
  18.       from: 'userName',
  19.       default: '韩梅梅',
  20.     },
  21.     todoUserId: {
  22.         from: 'userId',
  23.       default: 1
  24.     },
  25.   },
  26.   mounted() {
  27.       console.log(this.todoUserName) // 韩梅梅
  28.     console.log(this.todoUserId) // 1
  29.   },
  30. }

示例 - ts：

  1. // ts
  2. // 祖先组件 - Todo.vue
  3. import { Component, Vue, Provide } from 'vue-property-decorator'
  4. import TodoListItem from '@/components/TodoListItem.vue'
  6. @Component({
  7.   components: { TodoListItem },
  8. })
  9. export default class Todo extends Vue {
  10.   @Provide('userName') public userName = '韩梅梅'
  11.   @Provide('userId') public userId = 1
  12. }
  14. // 孙组件 - TodoListItem.vue
  15. import { Component, Vue, Inject } from 'vue-property-decorator'
  17. @Component({})
  18. export default class TodoListItem extends Vue {
  19.   @Inject('userId') public todoUserId = 1
  20.   @Inject('userName') public todoUserName = '韩梅梅'
  22.   private mounted() {
  23.       console.log(this.todoUserName) // 韩梅梅
  24.     console.log(this.todoUserId) // 1
  25.   }
  26. }

Ref

示例 - ts：

在Vue中，ref可以绑定DOM元素，也可以直接绑定Vue组件。

  1. <template>
  2.   <div class="todo">
  3.     <div ref="refTitle">
  4.       this is title
  5.     </div>
  6.     <TodoItem ref="refTodoItem" />
  7.   </div>
  8. </template>
  10. <script lang="ts">
  11. import { Component, Vue, Ref } from 'vue-property-decorator'
  12. import TodoItem from '@/components/TodoItem.vue'
  14. @Component({
  15.   components: { TodoItem },
  16. })
  17. export default class Todo extends Vue {
  18.   @Ref('refTitle') readonly refTitle!: HTMLDivElement // DOM
  19.   @Ref('refTodoItem') readonly refTodoItem!: TodoItem // Vue Component
  21.   private mounted() {
  22.     console.log(this.refTitle) // 等同于 this.$refs.refTitle
  23.     console.log(this.refTodoItem) // 等同于 this.$refs.refTodoItem
  24.   }
  25. }
  26. </script>

风格指南：

@Ref 装饰器函数第一个参数是模板中ref的值，代表你要绑定的是哪个ref。后面的变量代表可以用this.xxx访问到ref的变量名。
**

  • ref的命名，推荐以ref开头。DOM的ref进行语义化的命名，如 refTitle 。Vue组件的则以ref开头，后面跟上驼峰式的组件名，如 refTodoItem 。
  • ref的命名和要在class内通过this访问的变量名，命名保持一致。
  • 变量前加上 readonly 关键字，以保持ref对象不能随意赋值修改的属性。
  • 变量后无需赋值，同时加上非空断言。即 refTitle! 。来告诉ts编译器这个ref的类型就是冒号后面声明的类型，且无需手动赋值。
  • DOM类型的ref。官方已经定义好了几乎所有DOM类型的声明（https://developer.mozilla.org/zh-CN/docs/Web/API#%E6%8E%A5%E5%8F%A3）。实在无法确定的，可以先使用 HTMLElement 类型。
  • 组件类型的ref。import 获取组件后，直接将值作为ref的类型。（ts的import一般都会将值和类型同时引入）

    Model

    Vue官方文档： 一个组件上的 v-model 默认会利用名为 value 的 prop 和名为 input 的事件，但是像单选框、复选框等类型的输入控件可能会将 value attribute 用于不同的目的。model 选项可以用来避免这样的冲突：

示例 - js：

我们先来回顾一下vue js下model的用法：

父组件 Parent.vue

  1. <template>
  2.   <div class="parent">
  3.     <h1>parent</h1>
  4.     <ChildItem v-model="parentAge" />
  5.   </div>
  6. </template>
  8. <script>
  9. import ChildItem from '@/components/ChildItem.vue'
  11. export default {
  12.   components: {
  13.     ChildItem,
  14.   },
  15.   data: () => ({
  16.     parentAge: 18,
  17.   }),
  18. }
  19. </script>

子组件 ChildItem.vue

  1. <template>
  2.   <div class="child">
  3.     <button @click="getRandomName()">
  4.       获取随机年龄 - ({{ userAge }})
  5.     </button>
  6.   </div>
  7. </template>
  9. <script>
  10. export default {
  11.   name: 'ChildItem',
  12.   model: {
  13.     prop: 'user-age',
  14.     event: 'age-change',
  15.   },
  16.   props: {
  17.     userAge: {
  18.       type: Number,
  19.       default: 0,
  20.     },
  21.   },
  22.   methods: {
  23.     getRandomAge() {
  24.       // 这里触发model绑定的事件名
  25.       this.$emit('age-change', parseInt(Math.random() * 15, 10))
  26.     },
  27.   },
  28. }
  29. </script>

示例 - ts：

父组件 TodoApp.vue

  1. <template>
  2.   <div class="todo-app">
  3.     <TodoItem v-model="parentAge" />
  4.   </div>
  5. </template>
  7. <script lang="ts">
  8. import { Component, Vue } from 'vue-property-decorator'
  9. import TodoItem from '@/components/TodoItem.vue'
  11. @Component({
  12.   components: { TodoItem },
  13. })
  14. export default class TodoApp extends Vue {
  15.   public parentAge = 18
  16. }
  17. </script>

子组件 TodoAppItem.vue

  1. <template>
  2.   <div class="todo">
  3.     <button @click="getRandomAge()">
  4.       获取随机年龄 - ({{ userAge }})
  5.     </button>
  6.   </div>
  7. </template>
  9. <script lang="ts">
  10. import { Component, Vue, Model, Emit } from 'vue-property-decorator'
  12. @Component
  13. export default class TodoAppItem extends Vue {
  14.   @Model('user-age')
  15.   readonly userAge!: number
  17.   @Emit('user-age')
  18.   emitAgeChange(age: number) {
  19.     return age
  20.   }
  22.   public getRandomAge() {
  23.     this.emitAgeChange(parseInt(`${Math.random() * 15}`, 10))
  24.   }
  25. }
  26. </script>

风格指南：

父组件通过 v-model 传值，子组件不再需要 prop 。可以直接通过 @Model 装饰器同时配置 v-model 以及获取 prop 的属性。@Emit 装饰器中传入跟 @Model 中一样的值即可。

  • 通过 @Model 装饰器获取的属性也可以直接通过this访问，但是不能直接修改，因此加上 readonly 修饰符
  • @Emit 装饰器的参数最好使用横线连接kabeb-case格式，由于要跟 @Model 参数保持一致，因此model的参数最好也是用kabeb-case格式命名。