在现有Vue项目中加入TS支持

一、引

现在的前端项目，js遍地而是，但是TS也开始攻城略地，很多都转向了更加严谨和拥有类型检查的 typescript，所以我也打算改造下自己的项目，打算用 TS 重构。

二、安装依赖

    "vue-class-component": "^7.2.3",
    "vue-property-decorator": "^8.4.2",
    "babel-plugin-transform-decorators-legacy": "^1.3.5",
    "ts-loader": "^3.5.0",
    "tslint": "^6.1.2",
    "tslint-config-standard": "^9.0.0",
    "tslint-loader": "^3.5.4",
    "typescript": "^3.9.5",
//这就是package.json中多出来的几个项目以来

三、添加文件

// tsconfig.json
{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules"
    ],
    "compilerOptions": {
        "allowSyntheticDefaultImports": true,
        "experimentalDecorators": true,
        "allowJs": true,
        "module": "esnext",
        "target": "es5",
        "moduleResolution": "node",
        "isolatedModules": false,
        "lib": [
            "dom",
            "es6",
            "es2015.promise"
        ],
        "sourceMap": true,
        "pretty": true
    }
}
// 这就是自己的TS配置

// tslint.json   *非必须*
{
    "extends": "tslint-config-standard",
    "globals": {
      "require": true
    }
  }

// src/vue-slim.d.ts   让ts识别vue文件

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

三、改造文件

1. main.js

把文件的后缀改成 .ts

2. /build/webpack.base.conf

app: './src/main.ts'
// 入口从 .js 变成 .ts

extensions: ['.js', '.vue', '.json', '.ts']
// 多加入  .ts

{
   test: /\.ts$/,
   exclude: /node_modules/,
   enforce: 'pre',
   loader: 'tslint-loader'
},
{
   test: /\.tsx?$/,
   loader: 'ts-loader',
   exclude: /node_modules/,
   options: {
     appendTsSuffixTo: [/\.vue$/],
   }
},
//module中添加对ts文件的解析

3. .babelrc

"transform-decorators-legacy"
plugins中添加对修饰符的支持

四、npm start