一、结论

  先说结论，业界几乎对于Vue2使用ts都持否定态度，从笔者目前实践来看，Vue2使用ts确实很不方便。但笔者认为，只是使用层面上的不方便，对于减少开发过程中的出错率上，依旧还是很值得引入的。而且如果直接使用vue.extend的方式使用，升级到Vue3之后，目前来看并不会造成很大的修改。
（1）“Vue2起初的设计根本没有考虑类型系统”，需要基于vue-class-component的方式书写，个人感觉很麻烦。
（2）Vue3的书写方式不同（defineComponent，尽管目前vue-cli生成的模板依旧是vue-class-component方式），所以如果项目以后有升级到Vue3的打算，之后还要重写修改书写方式(直接使用vue.extend的方式，升级之后改写成本小很多)。
（3）培训成本，组员是否可以快速上手。
（4）ts，js混合开发，新旧代码分离，渐进性是修改。

二、项目引入ts

1、下载typescript和ts-loader

npm i typescript ts-loader -D

2、下载vue-class-component，使用class的模式编写vue（非必须）

npm i vue-class-component --save

3、配置webpack，vue-cli提供了修改webpack的入口

module.exports = {
  configureWebpack: {
    resolve: {
    	extensions: [`.js`, `.vue`, `.json`, `.ts`] // 后缀名
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
          	appendTsSuffixTo: [/\.vue$/] // ts-loader
          }
        },
      ]
    }
  }
};

4、在根目录下添加tsconfig.json，以下是vue配置官网的推荐配置

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

三、引入eslint规范（没有使用tslint），eslint可以同时支持js、ts的代码规范，很适合js、ts混用的项目。

1、初始化eslint，及时已经有eslint也可以重新初始化，这里有ts选项

eslint --init

2、下载eslint-loader

npm i eslint-loader -D

3、webpack配置eslint

{
  test: /\.(js|vue|ts)$/,
  loader: `eslint-loader`,
  enforce: `pre`,
  options: {
    fix: true, // 自动修复
    quiet: true,
    emitWarning: true,
  },
}