在纯js的Vue项目中加入TypeScript使之变成ts，js混合因为是使用vue-cli创建的项目，所以在vue.c

写习惯ts后就不想写js了，正好把手头的纯js项目转成混合的，新代码用ts，旧代码慢慢改造

package.json需要下载的库

// webpack中的ts-loader
"ts-loader"
// 不解释
"typescript"
// 下面两个是vue ts相关的
"vue-class-component"
"vue-property-decorator"

tsconfig相关（配置完后要重启IDE）

根目录建一个 vue-shim.d.ts 文件

declare module '*.vue' {
  import Vue from 'vue';

  export default Vue;
}

// overwrite window，这块代码只是举个例子，根据你需要来
interface Window {
  _actions: Array<string>;
}

根目录建一个 tsconfig.json 文件

{
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "strict": true,
    "allowJs": true,
    "sourceMap": true,
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*"
  ],
  "exclude": [
    "node_modules",
  ],
  "files": [
    "./vue-shim.d.ts"
  ]
}

webpack配置(vue.config.js)

因为是使用vue-cli创建的项目，所以在vue.config.js里修改。只需要修改三个地方就好

    entry: {
      app: './base/main.ts' //main.js顺手改成ts就好，出的错处理一下
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          loader: 'ts-loader',
          exclude: /node_modules/,
          options: {
            appendTsSuffixTo: [/\.vue$/],
          }
        }
      ]
    },
    resolve: {
      extensions: ['.ts', '.tsx', '.js', '.json'],
    }

eslint配置

略，因为每个公司的标准不同，我们主要标准是在一个库里，那个库主要用来监听git commit hook来做代码lint和提交信息的规范

比较坑的是这个库和我需要的eslint的配置和版本不同

出的一个问题就是写代码时候某行要求22缩进，提交的时候又变成要求20缩进