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 create my-project-name 】建立时命令行选择

  

vue官方教程 cn.vuejs.org/v2/guide/ty…

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

微软官方vue+ts教程： github.com/Microsoft/T…

若是项目已经存在，须要额外添加TypeScript的支持，vue官方也提供了支持，github.com/vuejs/vue-c…

vue add typescript
复制代码

这个命令会自动把js项目转换成ts，自动为项目的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'

由于在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') **

具体错误咱们看图

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

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

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重构 (二)