VUE 集成TypeScript之初步踩坑 (一)

为什么要集成TypeScript开发

现在2019年了，TypeScript越来越火，因为更多的人认识到了TypeScript的好处，一直写一直爽。

那用TypeScript开发项目后的优点在哪里尼？

• 减少bug
• 降低维护成本
• 接口可读性好
• 提高程序员的抽象能力

这些理由，应该有很多人会反对，大家都认为用js写项目，一样也可以实现上述理由，其他人做不到那是写的人不行，这个认知，我大部分也赞成，但是我们需要考虑现状。

• 一个人要保证每时每刻写的代码都很优质，其实很难的，比如说项目工期很赶，心情不好，这个时候写的代码也许过了三个月后，你自己都不认识了。
• 利用一些强规定或者规范，约束大家不要写垃圾代码，比如说限定代码的行数、一个函数的深度、多写注释、多写文档、加强review，前两项也许可以通过工具做到，后面的就需要花费比较多的人力，写代码的人累，review代码的人也累，到最后可能又回到了原点。
• 一个快速成型的团队，或者跨部门合作时，每个人每个团队都有自己的一套规范或者思想，这个时候沟通成本比较大，如果一起开发项目，是很难保证项目的健壮性的，特别是js写的代码，自由度非常高，非常考验一个人的水平。

这就是大部分团队的现状，项目越大，后期维护成本就越高，那为啥TypeScript可以降低这些问题发生的概率，或者缩小问题的规模尼。

TypeScript的优点

• 支持强类型，有默认的类型检查，光这个就可以减少很多不必要的bug，比如语法错误、类型转换错误，写的代码更安全了。
• 泛型支持，有了泛型，我们写共通代码时，很轻松的就可以知道对方需要什么，既不用看文档，也不需要问对方，很方便
• 更好的和后端对接，现在后端一般都有一套接口定义规范，用专门的IDL语言来设计，前端按照这些规范生成相应的api调用代码，如果是生成的js代码，那很明显不能完整的描述后端的强类型定义，TypeScript可以很好的做到这一点
• 一旦用了TypeScript，就意味你提供的接口，必须要给出明确的类型定义，在这种情况下，需要更多主动的思考，时间长了，抽象能力自然而然就提高了。当然也可以用any，但是如果都用any，那干脆还是用js好了，用啥TypeScript尼？

如何集成？

如果项目是全新的，有两种方式： 一种是vue官方的教程，所有的配置都是基于vue-cli全家桶来做的，开箱就能用；一种是微软出的教程，适合工程化有一定定制需求的团队。

以下是vue官方的教程

• 用【vue ui】命令时就创建项目，可以直接选TypeScript。

  
  vue ui

• 用【vue create my-project-name 】创建时命令行选择

  
  vue create my-project-name

vue官方教程 https://cn.vuejs.org/v2/guide/typescript.html

目前公司用的vue-cli搭建的项目，工程化文件都是vue默认提供的，微软的就不介绍了，有兴趣的可以去看看

微软官方vue+ts教程： https://github.com/Microsoft/TypeScript-Vue-Starter#typescript-vue-starter

如果项目已经存在，需要额外添加TypeScript的支持，vue官方也提供了支持，https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-typescript

vue add typescript

这个命令会自动把js项目转换成ts，自动为项目的package.json，加上相关的的依赖

package.json

记得把vue-class-component、vue-property-decorator升级下，默认的版本有点低

    "vue-class-component": "^7.0.2",
    "vue-property-decorator": "^8.1.0",

升级完，建议修改下vue.config.js的配置

const path = require("path");
 configureWebpack: config => {
    config.resolve.modules.push(path.resolve(__dirname, "src"));
  }

这是为了更好读取src下的目录，虽然vue.config.js 提供了src默认的alias => @，但是vue升级到vue3.0,在vs-code下，找组件关系依赖时，用@时，不是很方便，这是之前写react时碰到的坑吧。

踩过的坑

1. Property 'store' does not exist on type 'VueConstructor<Vue>'

因为在VueConstructor下是没有定义store这个属性，所以导致了这个错误

// main.ts
...
Vue.store = store;
...

既然知道了原因，那么修改下全局的VueConstructor这个就好了

// shims-vue.d.ts
import Vue, { ComponentOptions } from "vue";
import { Store } from "vuex";

declare module "vue/types/vue" {
  interface VueConstructor {
    store: Store<any>;
  }
}

再次编译，发现已经没有问题了。

2. 已有的项目做lint时报错

如果是全新的项目按照官方生成的应该是没有问题 ，但是已有的项目，因为历史 原因应该有很多lint规则和已有的lint规则不一致，导致报错，要一个个 修改也是麻烦，而且有些是没有办法立马修改的，比如说下面这种

<!-- eslint-disable max-lines -->
// 新的lint规则，不识别这种标识符。
····
// 路由规则
component: {
       render: h => (
            <keep-alive include="noticeIndex">
  // 没有开启jsx的功能，导致lint出错
                <router-view />
           </keep-alive>
      )
}

还有就是一些历史的js共通函数，这些都可能过不了新的lint规则，要一个个修正也麻烦，那怎么解决尼？

有三种方式

• 修改lint的规则，或者修改文件，一个个修改，看项目的复杂度，越古老的项目时间人力成本越大，可行性比较低
• 直接废弃@typescript-eslint/parser，沿用默认的lint规则，或者重新制定规则，这个如果对于lint规则比较熟悉的人，问题应该不大，不熟悉的就算了
• 对已有的lint规则适配范围进行修正，把规则限定在vue内，ts、tsx的用tslint做，目前我们的lint规则是针对公司已有的业务 进行的定制，所以这一种方法比较适合我们。（eslint、tslint、stylelint我们定制了自己的库）

直接上代码

// .eslintrc
"overrides": [
    {
      "files": ["*.vue"],
      "parserOptions": {
        "ecmaFeatures": {
          "jsx": true
        }
      }
    }
  ]
// tsconfig.json
"exclude": ["node_modules", "dist", "src/main.ts"]

3. IDE无法识别** import('xxx.vue') **

具体错误我们看图

IDE报错

在run server时，控制台也会报错

控制台报错

虽然控制台和IDE都报错了，但是这个并不影响页面的开发，只不过一堆的错误，放在控制台肯定不好看，Google了下发现也没有特别好的解决方案，vue官方有一个issue，用// @ts-ignore 标识符忽略掉，只不过这个标识符每次只能忽略一行，如果在router组件内，有一堆的import，就很麻烦了。

@ts-ignore

vue官方issue： Typescript: IDE reports TS2307: Cannot find module error for Vue components imports

顺着TypeScript的@ts-ignore线索，看看能不能一次性写一个标识符，比如下面这样

@ts-ignore-start
@ts-ignore-end

@ts-ignore-all

@ts-ignore-file

看着是不是很机智，哈哈，这是一个还在讨论的issue，上面都是issue的建议，大家有时间去可以跟下帖子，蛮有意思的。

TypeScript 官方issue： @ts-ignore for the block scope and imports

第一篇分享就到这。

有兴趣的可以继续往下看

VUE 集成TypeScript之vue-router重构 (二)