vue2项目ts改造记录

优化重构背景：

随着前端项目的业务逻辑越来越复杂，代码也逐渐劣化。因为js弱类型的语言特性，变量没有类型约束。任何变量在运行态都变得不可知，函数的出入参也不可知。这不仅导致了各种低级问题的产生，还使代码逻辑难以理解，数据流不可控。 即使想对代码进行重构也是举步维艰。

考虑引入ts改造vue项目，主要看中了ts的如下优势可以解决项目痛点：

a. 清晰的函数参数/接口属性，增加了代码可读性和可维护性。 b. 静态检查，可以约束随意的变量读写；配合现代编辑器，各种提示可以提升编码效率。

项目改造步骤

1. 新增必要依赖项——以支持编译ts为js

yarn add typescript ts-loader --dev

2. WebPack配置修改——以webpack识别ts、vue文件，并标明使用ts-loader处理。

增加TS后缀：

extensions: ['.js', '.vue', '.json', '.ts'], 

增加ts-loader:

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

3. TypeScript配置文件（tsconfig.json）——以ts项目的必要配置

4. 新增vue type类型——让 ts 能够解析识别 vue 文件：

新建src/types/vue-shims.d.ts文件，内容如下

declaremodule "*.vue" {
    importVuefrom "vue";
    exportdefaultVue;
}

5. 增加 eslint 规则——解决使用 ts 内置类型时保报错

新增依赖项：

yarn add @typescript-eslint/parser @typescript-eslint/eslint-plugin vue-eslint-parser --dev

.eslintrc.js文件配置修改：

 extends: [

 "plugin:vue/essential",

 "eslint:recommended",

 "@vue/prettier",

 "plugin:@typescript-eslint/recommended"

  ],

 // 解析 .vue 文件

 parser: "vue-eslint-parser",

 plugins: ["@typescript-eslint", "vue"],

 parserOptions: {

 parser: "@typescript-eslint/parser" // 解析 .ts 文件

  },

rule中可根据项目要求添加其他ts编码规范

6. 项目业务文件修改——以使用ts特性

js文件将后缀名修改为ts；

vue文件中， 改为

<script  lang="ts"> ； export default{} 改为 export default Vue.extend({})

这样。文件内的就可以使用ts语言特性了。

后语：

在ts改造后，后期对前端项目进行逐步重构优化时，发现了若干低级错误。

vue2的项目，仍然没法做到全面的ts支持。一些重要vue特性，如Vue中，使用this.xxx引用data/computed及method时，无法进行提示及校验。mixin及store的特性，也游离在ts特性之外。

项目目前主要在util及api/service层，对通用的工具方法及业务逻辑进行约束校验。不过搭配vscode强大的提示能力，也基本可以覆盖vue文件内的数据处理。

对于mixin和store的特性，在项目中通过代码review来进行强管控，非必要不使用。如果使用，也通过额外的指定数据类型和type定义来约束。