vue2中使用typescript

1.创建项目及开发环境配置流程

1.1 创建项目

winpty vue.cmd create my-project

• 选择第三个手动模式
• 选择配置，typescript要选，其他可自行选择 -选择vue版本，这里目前咱们用的是2.x的
• 这里说是否使用Class风格装饰器，咱们选择是
• 使用babel与typescript配合用于自动检测的填充
• 
• 代码格式检查，看个人选择
• TSLint // typescript格式验证工具
• ESLint with error prevention only // 只进行报错提醒
• ESLint + Airbnb config // 不严谨模式
• ESLint + Standard config // 正常模式
• ESLint + Prettier // 严格模式
• 代码检查方式，这个看个人选择 -文件配置，这里看个人选择，这里是选放在一个独立的文件 -是否保存配置，下一次直接使用创建项目，这里看个人需要

2.使用到的插件库

2.1vue2.0要用上 ts 通常需要借助于 ==vue-property-decorator，vue-class-component== 这个库

• 安装依赖

npm i -S vue-property-decorator vue-class-component

文档

class-component.vuejs.org/guide/addit…

github.com/kaorun343/v…

vue-property-decorator 基本内容及使用

装饰器

• @Prop (相当于vue中的props)

import { Vue, Component, Prop } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Prop(Number) readonly propA: number | undefined
  @Prop({ default: 'default value' }) readonly propB!: string
  @Prop([String, Boolean]) readonly propC: string | boolean | undefined
}

等价于vue写法

export default {
  props: {
    propA: {
      type: Number,
    },
    propB: {
      default: 'default value',
    },
    propC: {
      type: [String, Boolean],
    },
  },
}

• @Model (相当于vue中自定义model传值)

import { Vue, Component, Model } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Model('change', { type: Boolean }) readonly checked!: boolean
}

等价于vue写法

export default {
  model: {
    prop: 'checked',
    event: 'change',
  },
  props: {
    checked: {
      type: Boolean,
    },
  },
}

• @watch (相当于vue中的侦听器watch)

import { Vue, Component, Watch } from 'vue-property-decorator'

@Component
export default class YourComponent extends Vue {
  @Watch('child')
  onChildChanged(val: string, oldVal: string) {}

  @Watch('person', { immediate: true, deep: true })
  onPersonChanged1(val: Person, oldVal: Person) {}

  @Watch('person')
  onPersonChanged2(val: Person, oldVal: Person) {}
}

等价于vue中写法

export default {
  watch: {
    child: [
      {
        handler: 'onChildChanged',
        immediate: false,
        deep: false,
      },
    ],
    person: [
      {
        handler: 'onPersonChanged1',
        immediate: true,
        deep: true,
      },
      {
        handler: 'onPersonChanged2',
        immediate: false,
        deep: false,
      },
    ],
  },
  methods: {
    onChildChanged(val, oldVal) {},
    onPersonChanged1(val, oldVal) {},
    onPersonChanged2(val, oldVal) {},
  },
}

@Emit (相当于vue中的$emit，用于父子传值)

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()
  promise() {
    return new Promise((resolve) => {
      setTimeout(() => {
        resolve(20)
      }, 0)
    })
  }
}

等价于vue写法

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

@Ref (相当于vue中的$refs)

import { Vue, Component, Ref } from 'vue-property-decorator'

import AnotherComponent from '@/path/to/another-component.vue'

@Component
export default class YourComponent extends Vue {
  @Ref() readonly anotherComponent!: AnotherComponent
  @Ref('aButton') readonly button!: HTMLButtonElement
}

等价于vue写法

export default {
  computed() {
    anotherComponent: {
      cache: false,
      get() {
        return this.$refs.anotherComponent as AnotherComponent
      }
    },
    button: {
      cache: false,
      get() {
        return this.$refs.aButton as HTMLButtonElement
      }
    }
  }
}

2.2使用vuex用上ts,需要借助于 ==vuex-module-decorators== 这个库

安装依赖

npm install  vuex-module-decorators

文档

championswimmer.in/vuex-module…