Vue2.6.x + TypeScript 踩坑笔记

本文的前提是您已经掌握了 Vue和TS，只是对两者结合还不太熟悉，使用jsx的方式会更友好

vue-property-decorator 提供了装饰器的能力

基本模板

<template>
  <div class="hello">
    <h1>{{ firstName }}</h1>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component<HelloWorld>({
  name: 'HelloWorld',
})
export default class HelloWorld extends Vue {
  public download() {}
  firstName: string = 'xioadun';
  private show: boolean = false;
  private mounted() {}
}
</script>

export default class HelloWorld extends Vue

HelloWorld也是对自身的类型定义

@Component<HelloWorld>({
  name: 'HelloWorld',
})

把定义给到了@Component装饰器，使它能像在类里面使用this

不然尽管代码运行正常，在TS里还是会报错的
例如 "Property 'firstName' does not exist on type 'Vue' "

template与修饰符

这时候你在mounted方法中

已经可以得到提示了
想要在tempale的得到提示和约束，需要安装Vetur，并在settings.json中添加

  "vetur.experimental.templateInterpolationService": true,

这需要class里属性的修饰符不是private，mounted这种从开发的角度上不会给外面提供，用public修饰的，则类似是this.$refs这种访问

可惜的是，class里面实现不了这样的效果，只能看控制台了。

Vue语法

@prop
只负责提供默认值和是否必须这种语义化的东西，

  @Prop({ default: () => [] }) list: string[];

计算属性
通过get 、set的方式

  get name() {
    return this.firstName + this.lastName;
  }

refs

      <Master ref="master"  />

export default class App extends Vue {
  $refs: {
    master: Master;
  };
}

要比@ref直观的多

如果是第三方组件您可能会遇见如下错误(2020/02/07)

Type 'typeof  ***' is not assignable to type 'VueConstructor<Vue> 
| AsyncComponentPromise<any, any, any, any> 
| AsyncComponentFactory<any, any, any, any> | FunctionalComponentOptions<...> | ComponentOptions<...>'.
  Type 'typeof ***' is not assignable to type 'VueConstructor<Vue>'.
    Types of parameters 'options' and 'options' are incompatible.

自定义的接口要继承Vue

export interface IPreviewer extends Vue {
  show: (index: number) => void;
}

看$refs的声明

readonly $refs: { [key: string]: Vue | Element | Vue[] | Element[] };

扩展Vue的原型

Vue自身设计的思路，想避免挂载到原型上这种操作，也不是很现实，你想这样访问的话

this.$route.push();

首先打开，shims-vue.d.ts 这个文件，默认是这样样子的

declare module '*.vue' {
  import Vue from 'vue'
  export default Vue
}

添加自定义的

import Vue from 'vue';
declare module '*.vue' {
  export default Vue;
}
declare module 'vue/types/vue' {
  interface Vue {
    $logger: {
      emit: (
        data:
          | { eventName: 'click'; data: { timestmp: string } }
          | { eventName: 'scan'; data: { duration: number } },
      ) => void;
    };
  }
}

本文将持续更新

关注专题 前端便利店 https://www.jianshu.com/c/c3f77a86d9a5 ，帮您省时省力!