为什么要集成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-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，加上相关的的依赖
记得把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') **
具体错误我们看图
在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
第一篇分享就到这。
有兴趣的可以继续往下看
