关于如何在vue中使用typescript(第一天)

环境

• Vue2
• Typescript

创建项目

vue create demo

目录介绍

基本介绍

使用

开始前我们先来了解一下在 vue 中使用 typescript 非常好用的几个库

vue-class-component

vue-class-component是一个 Class Decorator,也就是类的装饰器

vue-property-decorator

vue-property-decorator是基于 vue 组织里 vue-class-component 所做的拓展import { Vue, Component, Inject, Provide, Prop, Model, Watch, Emit, Mixins } from 'vue-property-decorator'

vuex-module-decorators

用 typescript 写 vuex 很好用的一个库import { Module, VuexModule, Mutation, Action, MutationAction, getModule } from 'vuex-module-decorators'

组件声明

ts版

js版

data 对象

ts版

• !: 表示一定存在，?: 表示可能不存在。这两种在语法上叫赋值断言
• public表示外部ts可调用
• private只能在当前ts使用
• protected表示继承类可使用

js版

props 对象

ts版

js版

method

ts版

js版

watch

ts版

@Watch(path: string, options: WatchOptions = {}) options 包含两个属性 immediate?:boolean 侦听开始之后是否立即调用该回调函数 / deep?:boolean 被侦听的对象的属性被改变时，是否调用该回调函数

@Watch('arr', { immediate: true, deep: true }) onArrChanged(newValue: number[], oldValue: number[]) {}

js版

computed 计算属性

ts版

<template>
  <input v-model="name">
</template>
 
<script>
import Vue from 'vue'
import Component from 'vue-class-component'
 
@Component
export default class HelloWorld extends Vue {
  firstName = 'John'
  lastName = 'Doe'
 
  // Declared as computed property getter
  get name() {
    return this.firstName + ' ' + this.lastName
  }
 
  // Declared as computed property setter
  set name(value) {
    const splitted = value.split(' ')
    this.firstName = splitted[0]
    this.lastName = splitted[1] || ''
  }
}
</script>

js版

<template>
  <el-table border :data="data" style="width: 100%;" height="400" @selection-change="selectChange">
    <el-table-column type="selection" width="55"></el-table-column>
    <el-table-column prop="code" label="编码"></el-table-column>
    <el-table-column prop="name" label="名称"></el-table-column>
  </el-table>
</template>
 
<script>
export default {
  name: 'hierarchy-table',
  props: {
    value: {
      type: Array,
      required: true
    },
    skipCodes: {
      type: Array
    }
  },
  data() {
    return {
    };
  },
  computed: {
    data() {
      return this.skipCodes ? this.value.filter(it => !this.skipCodes.includes(it.code)) : this.value;
    }
  },
  methods: {
    selectChange(selection) {
      this.$emit('selection-change', selection);
    }
  }
};
</script>

emit 事件

Ts

import { Vue, Component, Emit } from 'vue-property-decorator'
@Component
export default class MyComponent 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()
  promise() {
      return new Promise(resolve => {
      setTimeout(() => {
          resolve(20)
      }, 0)
      })
  }
}

JS

export default {
  data() {
      return {
      count: 0
      }
  },
  methods: {
      addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
      },
      resetCount() {
      this.count = 0
      this.$emit('reset')
      },
      returnValue() {
      this.$emit('return-value', 10)
      },
      onInputChange(e) {
      this.$emit('on-input-change', e.target.value, e)
      },
      promise() {
      const promise = new Promise(resolve => {
          setTimeout(() => {
          resolve(20)
          }, 0)
      })
      promise.then(value => {
          this.$emit('promise', value)
      })
      }
  }
 }