vue-cli 中使用 TypeScript

学以致用，这篇文章是对在 vue-cli 中使用 TypeScript 的一次小结。

环境

npm

// typescript

npm install typescript --save-dev

// ts-loader
npm install ts-loader --save-dev

webpack.base.conf.js

module.exports = {
  // 修改入口文件
  entry: './src/main.ts',
  // 引入 ts/tsx 文件时不必后缀 
  resolve: {
    extensions: ['.js', '.vue', '.json', '.ts', '.tsx'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
    }
  },
  module: {
    // 对 ts 使用 ts-loader
    {
      test: /\.tsx?$/,
      exclude: /node_modules/,
      use: [
        "babel-loader",
        {
          loader: "ts-loader",
          options: { appendTsxSuffixTo: [/\.vue$/] }
        }
      ]
    }
    // ...其他
  }
}

创建一个 .d.ts 文件让 TypeScript 识别 .vue 文件，在此项目中，我放到了 src/typings 文件夹下：

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

根目录下添加 tsconfig.json 配置文件，配置参数参考：https://zhongsp.gitbooks.io/typescript-handbook/content/doc/handbook/Compiler%20Options.html ，项目内有一份配置，就不贴出来了。

JavaScript 校验

很遗憾，如果你使用 TypeScript，在vue-cli(2.9.1) 里并不能使用 ESlint 校验 .vue 文件了，很常见的一个报错：

ts-1.png

在 .vue 文件内，并不识别 .d.ts 声明文件内的类型。

ESlint 不能用，TSlint 怎么样？
折腾了一会，在 .vue 文件内也有坑（可能是功力不够），最后决定先放弃。

webpack.base.conf.js

ts-2.png

关于插件

由于在 Vue 中使用 TypeScript 还不是很普及，大部分插件都缺少声明文件：

ts-3.jpeg

此时必须添加新声明。
不过还好，Vue, Vue Router, Vuex, Element，都提供了相应的声明文件。

开始修改

.vue 文件

当然，首先要让 webpack 识别为 TypeScript 而不是 JavaScript，在 script 标签上加上 lang="ts"：