现有vue项目支持TypeScript

今年国庆期间尤雨溪公布了Vue 3.0的源码，代码库是用TypeScript写的。
现有项目还未开始支持TS(下面全用简称)，支持TS这件事忽然变得迫在眉睫了。

项目基本依赖包版本

vue 2.5.22
vue-cli 3.0.0

需要安装的依赖包

npm install typescript @vue/cli-plugin-typescript --save-dev
npm install vue-class-component vue-property-decorator --save-dev
npm install @vue/eslint-config-typescript --save-dev

typescrpt // 必须的
@vue/cli-plugin-typescript // vue-cli 3 需要安装
vue-class-component 官方出品 | 支持类声明的方式写组件，提供了Vue、Component等
vue-prototype-component 社区出品 | 深度依赖了vue-class-component，拓展出了更多操作符：@Prop、@Emit、@Inject、@Model、@Provide、@Watch
@vue/eslint-config-typescript // 保持代码整洁eslint不能少 <-- 版本问题安装失败暂时pass

tsconfig.json 配置文件

// 官方推荐配置
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

重启本地服务
No inputs were found in config file 'tsconfig.json'. Specified 'include' paths were '["src/**/*.ts","src/**/*.tsx","src/**/*.vue","packages/**/*.ts","packages/**/*.tsx","packages/**/*.vue"]' and 'exclude' paths were '["node_modules"]'.
报了个错，解决方案，在include包含的路径下新建一个.ts结尾的空文件即可通过编译

一个简单支持TS的小组件

轻松愉快的写个小demo，然后会发现@不能用了，必须要用相对路径引用，并且必须带上.vue的后缀

让TS识别.vue

然而上面的小demo其实也是跑不起的，因为TypeScript 默认并不支持 *.vue 后缀的文件。
在src路径下新建一个my-property(名字随便取).d.ts的配置文件

import Vue from 'vue'

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

这里告诉TS遇到.vue后缀的文件，要让Vue模块来处理。

强类型更严格

现有项目使用了axios、vue-router、element-ui等，代码中使用未声明过的方法或者变量都是会报错的，例this.$route
使用TS的模块补充功能加一下需要的声明，庆幸现在大型的组件库或者使用人数多的一些插件都已经写好了声明文件了（到相应npm包里.d.ts结尾的文件里可以看一下哦）。

// 还是刚才的my-property.d.ts文件

declare module 'vue/types/vue' {
// 声明为 Vue 补充的东西
  interface Vue {
    $axios: any // 偷懒写法 解决this.$axios报错
  }
}

// 把用到的包都引一下
declare module 'vue-i18n'
declare module 'axios'
declare module 'vue-router'
declare module 'element-ui'

到这里现有项目跑起来是没有问题了，具体用TypeScript写组件时遵循官网API，这样就可以愉快在老项目里玩新语言啦。

vue支持TypeScript