项目中总会依赖一些资源包，或是自己开发的一些组件，这些文件需要补充声明文件，声明文件就是将多个声明语句放在一起，这些声明文件可统一放到一个目录里。这个目录需要包含在 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. 踩坑总结
大部分都是eslint校验时的报错，按照提示修复就可以了。
"vue/html-indent": [2, 4] eslint这条规则去掉
"plugin:vue/base"与"plugin:vue/recommend"的区别
...
8. 总结
项目改造过程中，大部分时间都是在查配置兼容问题，配置这块解决了，改造起来速度还是挺快的。虽然前期会有一些改造成本，但是长远来看，还是有意义的。毕竟很多代码类型上的问题在开发阶段就可以暴露，不用等到运行时才发现了。