vue项目引入ts步骤(小结)

"@typescript-eslint/no-object-literal-type-assertion": 0,
"no-param-reassign": [
2,
{
"props": false
}
],
"generator-star-spacing": "off",
"indent": [2, 4, {
"SwitchCase": 1
}],
"eqeqeq": 0,
"no-else-return": 2,
"arrow-parens": 0,
"space-before-function-paren": ["error", "never"],
"comma-dangle": [2, "never"],
"semi": [2, "always"] }
}

注意”extends”: [“plugin:vue/base”], 只能选择vue/base，不能用vue/recommend。不然会有规则冲突。

6. 项目文件转换

项目配置好后，开始对老代码进行改造，来支持ts的语法检测。

6.1 增加ts声明文件目录

项目中总会依赖一些资源包，或是自己开发的一些组件，这些文件需要补充声明文件，声明文件就是将多个声明语句放在一起，这些声明文件可统一放到一个目录里。这个目录需要包含在 tsconfig.json 文件的include里。

ms工程在根目录下新建 types 目录，目前包含 vue.d.ts, request.d.ts, dialog.d.ts, base.d.ts 等文件。

6.2 全局vue.d.ts声明文件

需要在ts环境下识别vue文件，需要添加 vue.d.ts 全局声明文件，例子如下：

import VueRouter, { Route } from 'vue-router';
import RequestAxios from './request';
declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
    $request: RequestAxios;
    ....
  }
}

6.2 vue文件的改造

vue文件的改造，只改造js部分，代码大致修改如下：

import { Vue, Component, Prop, Watch } from 'vue-property-decorator';
@Component({
  components: {
    ....
  }
})
export default class MyComponent extends Vue {
  // prop
  @Prop({ default: () => {} }) readonly pageInfo !: any
  // data
  private showAnimation : boolean = true;
  // watch
  @Watch('showModuleIndex')
  onShowModuleIndexChanged(newValue: any) {
    this.$emit('input', newValue);
  }
  // computed
  get list() {
    const { page, cityList } = this;
    return page.cityList.split(',').map(
      cityId => cityList.find(c => String(c.id) === cityId)
    );
  }
  // mounted
  private mounted() :void {
    this.initEditor();
  }
  // methods
  private initEditor() :void {
    ....
  }
}
</script>

6.3 js文件的改造

将文件后缀名更改为.ts，然后加上类型就可以了。

7. 踩坑总结