vueプロジェクトはtsステップを導入する（小結）

最近は古いプロジェクトコードの維持性と安定性を考慮して、tsを導入して規範検査を行うことにしました。紹介したものは基礎的なので、紹介したものが間違ったら、指摘してください。
1.概要
Type ScriptはJavaScriptのオーバーセットであり、主にタイプシステムとES 6へのサポートを提供しています。ネットでtsに関する学習資料が多いので、ここで詳しく紹介しません。参考できる学習サイト：
ts.xcatliu.com/
typescript.bootcss.com/
2.依存パッケージのインストール

cnpm i typescript ts-loader --save-dev

3.tsconfig.jsonファイルを追加する
プロジェクトのルートディレクトリにtsconfig.jsonファイルを追加します。tsconfig.jsonファイルはtsのコンパイルオプションを指定します。設定の参考:
https://typescript.bootcss.com/tsconfig-json.html
プロジェクトのtsconfig.jsonファイルの配置は以下の通りです。

{
  "compilerOptions": {
    "baseUrl": ".",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "noEmitOnError": true,
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "allowJs": true,
    "noEmit": false,
    "noImplicitThis": true,
    "esModuleInterop": true,
    "sourceMap": true,
    "moduleResolution": "node"
  },
  "include": [
    "src/**/*", "types"
  ],
  "exclude": [
    "node_modules",
    "build"
  ]
}

4.webpackパッケージの設定変更
webpack.co.nfig.js包装ファイルの修正、対.tsファイルの包装配置を追加しました。
4.1エントリファイルの拡張子名は.jsから.tsに変更されます。

module.exports = {
  entry: {
    app: ['@babel/polyfill', './src/main.ts']
  }
}

4.2 extensファイルの拡張子が増加しました。ts，tsxファイルのサポート
tsxはreactプロジェクトファイルのサポートに対して、私達のプロジェクトはvue開発に基づいて、サポート.tsファイルでいいです。

module.exports = {
  resolve: {
    extensions: ['.js', '.vue', '.json', '.css', '.ts']
  }
}

4.3 loader tsファイルへのサポートを追加する
ts-loaderを使ってtsファイルを変換します。

module.exports = {
  module: {
    rules: [
      {
        test: /\.ts?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
        options: {
         appendTsSuffixTo: [/\.vue$/],
        }
      }
    ]
  }
}

5.eslint tsファイルの検査を追加する
5.1依存パッケージのインストール

cnpm i @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-config-typescript eslint-plugin-typescript --save-dev

@typescript-eslint/parser tsファイル解析器
@typescript-eslint/eslint-pluginバージョン番号は@typescript-eslint/parserのバージョンと一致して、解像器関連の設定オプションが必要です。
eslint-config-typescriptはtsプロジェクトに対して配置されたeslint検査規範
5.2.eslintrcプロファイルの変更
eslintrcプロファイルの変更は、tsのファイルの検証をサポートします。多くの調整を経て、私達のプロジェクトのeslintrc配置ファイルは以下の通りです。

{
  "parserOptions": {
    "parser": "@typescript-eslint/parser",
    "project": "./tsconfig.json",
    "extraFileExtensions": [".vue"],
    "ecmaVersion": 2017,
    "sourceType": "module",
    "ecmaFeatures": {
      "modules": true
    }
  },
  "env": {
   "jest": true,
   "browser": true
  },
  "settings": {
   "import/resolver": {
    "node": {
     "extensions": [".js", ".jsx", ".ts", ".tsx", ".eslintrc"]
    },
    "webpack": {
     "config": {
      "resolve": {
       "alias": {
        "src": "src"
       }
      }
     }
    }
   }
  },
  "plugins": [
    "vue",
    "babel",
    "@typescript-eslint"
  ],
  "extends": [
    "eslint:recommended",
    "plugin:vue/base",
    "typescript",
    "standard"
  ],
  "rules": {
    "func-names": 0,
    "one-var": [1, "never"],
    "prefer-const": 1,
    "no-unused-expressions": 1,
    "new-cap": 2,
    "prefer-arrow-callback": 2,
    "arrow-body-style": 0,
    "max-len": [
      1,
      {
      "code": 200,
      "ignoreStrings": true,
      "ignoreUrls": true,
      "ignoreRegExpLiterals": true
      }
    ],
    "consistent-return": "off",
    "default-case": 2,
    "prefer-rest-params": 2,
    "no-script-url": 0,
    "no-console": [
      2,
      {
      "allow": ["info", "error", "warn", "log"]
      }
    ],
    "no-duplicate-imports": 2,
    "newline-per-chained-call": 2,
    "no-underscore-dangle": 2,
    "eol-last": 2,
    "no-useless-rename": 2,
    "class-methods-use-this": 0,
    "prefer-destructuring": 0,
    "no-unused-vars": 0,
    "@typescript-eslint/no-unused-vars": 1,
    "no-plusplus": 0,
    "import/prefer-default-export": 0,
    "import/no-dynamic-require": 2,
    "@typescript-eslint/no-var-requires": 2,
    "no-use-before-define": [
      "error",
      {
      "functions": false
      }
    ],
    "@typescript-eslint/no-use-before-define": 0,
    "@typescript-eslint/explicit-function-return-type": 0,
    "@typescript-eslint/interface-name-prefix": 0,
    "no-invalid-this": 0,
    "babel/no-invalid-this": 2,
    "no-await-in-loop": "off",
    "array-callback-return": "off",
    "no-restricted-syntax": "off",
    "@typescript-eslint/no-explicit-any": 0,
    "import/no-extraneous-dependencies": 0,
    "import/no-unresolved": 0,
    "@typescript-eslint/explicit-member-accessibility": 0,
    "@typescript-eslint/no-object-literal-type-assertion": 0,
    "no-param-reassign": [
      2,
      {
      "props": false
      }
    ],
    "generator-star-spacing": "off",
    "indent": [2, 4, {
      "SwitchCase": 1
    }],
    "eqeqeq": 0,
    "no-else-return": 2,
    "arrow-parens": 0,
    "space-before-function-paren": ["error", "never"],
    "comma-dangle": [2, "never"],
    "semi": [2, "always"]
  }
 }

注意「extens」：[[plugin:vue/base]]は、vue/baseのみ選択できます。vue/recommendは使えません。さもないと規則的な衝突があります。
6.プロジェクトファイル変換
プロジェクトの配置がよくなったら、古いコードを改造して、tsの文法検査をサポートします。
6.1 ts宣言ファイルディレクトリを追加する
プロジェクトは常にいくつかのリソースパッケージに依存しています。または、自分で開発したコンポーネントによって、これらのファイルは声明文を追加する必要があります。ステートメントファイルは複数のステートメント文を一緒に置いています。これらのステートメントファイルは一つのディレクトリにまとめられます。このディレクトリはtsconfig.jsonファイルのincludeに含まれている必要があります。
MSプロジェクトはルートディレクトリの下でtypesディレクトリを作成し、現在はvue.d.ts、request.d.ts、dialog.d.ts、base.d.tsなどのファイルを含んでいます。
6.2グローバルvue.d.ts声明ファイル
ts環境下でvueファイルを識別する必要があります。vue.d.tsグローバルステートメントファイルを追加する必要があります。例は以下の通りです。

import VueRouter, { Route } from 'vue-router';
import RequestAxios from './request';

declare module '*.vue' {
  import Vue from 'vue';
  export default Vue;
}
declare module 'vue/types/vue' {
  interface Vue {
    $router: VueRouter;
    $route: Route;
    $request: RequestAxios;
    ....
  }
}

6.2 vueファイルの改造
vueファイルの改造は、js部分だけ改造し、コードは大体次の通り修正されます。

import { Vue, Component, Prop, Watch } from 'vue-property-decorator';

@Component({
  components: {
    ....
  }
})
export default class MyComponent extends Vue {
  // prop
  @Prop({ default: () => {} }) readonly pageInfo !: any

  // data
  private showAnimation : boolean = true;

  // watch
  @Watch('showModuleIndex')
  onShowModuleIndexChanged(newValue: any) {
    this.$emit('input', newValue);
  }

  // computed
  get list() {
    const { page, cityList } = this;
    return page.cityList.split(',').map(
      cityId => cityList.find(c => String(c.id) === cityId)
    );
  }

  // mounted
  private mounted() :void {
    this.initEditor();
  }

  // methods
  private initEditor() :void {
    ....
  }
}
</script>

6.3 jsファイルの改造
ファイルの拡張子名を.tsに変更して、タイプを追加すればいいです。
7.ピット総括
ほとんどがeslint検査時のエラーです。ヒントに従って修復すればいいです。
「vue/html-indent」：[2,4]eslintこの規則は削除されます。
「plugin:vue/base」と「plugin:vue/recommend」の違い
…
8.まとめ
プロジェクトの改造の過程で、ほとんどの時間は配置の互換性を調べています。これを配置して解決しました。改造のスピードはまだ速いです。前の段階は改造コストがありますが、長い目で見れば、やはり意味があります。多くのコードタイプの問題は開発段階で暴露できます。運行時に発見する必要はありません。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。