Vue + TypeScript 使用小结

Vue+TypeScript使用小结

1. 创建新工程，可以安装vue cli 3，通过vue create创建

   npm install --global @vue/cli

2. 必须 添加vue文件声明shims-vue.d.ts, 用于TypeScript识别vue文件。内容可参考下例。
   1) ts默认不支持导入vue文件, 需要通过以下声明语句告诉ts按VueConstructor 处理vue文件的导入。因此，引用vue文件必须加上.vue后缀。
   2) 当我们需要在Vue上挂载全局变量或方法时,
   e.g. Vue.prototype.$ajax=axios;
   需要在Vue接口上声明相应变量

   import Vue from 'vue'
   import { AxiosInstance } from 'axios';
   
   declare module 'vue/types/vue' {
       interface Vue {
           $ajax: AxiosInstance;
           _: any;
           $util: any;
       }
   }
   
   declare module '*.vue' {
       export default Vue
   }

3. 非必须 添加shims-tsx.d.ts文件，可以方便在ts中使用jsx语法。使用jsx语法和使用我们使用模板编写的方式主要区别在于，使用模板无法获得静态类型提示。配合babel-plugin-jsx-v-model插件可以在jsx语法中实现v-model

4. 使用TypeScript编写Vue的时候，主要有两种方法：Vue.extend()和vue-class-component，两种方法对script部分添加属性lang=ts
   1) Vue.extend()：使用基础vue构造器，创建一个子类，接近我们以前的vue写法。用Vue.extend()包裹组件内容就可以了。通过Vue.extend定义组件可以启用vue的类型推断，类似下例：