关于vue.js:如何引进-Typescript-到现存-Vuecli3项目中

前言

在把我的项目革新反对 Typescript 之后, 跑了几个迭代, 也踩了一些坑。还好这些坑总体可控，没翻车，所以就写篇文章分享一下，如果想要体验 vue+typescript 的同学能够看看。
之前配置的过程查找了很多材料，但大部分都是上面两种计划：

• 基于 vue-cli3+ 的全新的我的项目
• vue-cli2 的老我的项目引进 typescript

然而咱们公司的我的项目在新建我的项目的时候并没有引入 typescript 的反对。如果前期想引入 typescript 呢，有没有一种 向后兼容（backward compatibility）的形式整合到现有的我的项目中呢，既可反对 ts，也能够兼容 js，这样现有的代码就简直不必改变了。
上面分三局部来形容 👇：

• 一个基于 vue-cli3+、反对 typescript 的新我的项目是怎么配置的？
• 如何利用这些不同的配置到现存的我的项目中？
• 因为子项目须要引入主模块的 app，还有 vue，element-ui 等等是以 extenal 引进来的，这些须要如何配置才不使 ts 报错？

1. 一个基于 vue-cli3+、反对 typescript 的新我的项目是怎么配置的？

开始之前，咱们先理解一下 Typescript 是什么？为什么须要它，能给我的项目带来什么？(如果相熟 typescript 的话，这部分能够跳过哈)

• Typescript 是 JavaScript 的超集

正如官网说形容: “A superset of Javascript”，Typescript 更靠近面对对象语言，反对更多的 JS 不能反对的语法：
例如，链式语法，js: res && res.data && res.data.name ; ts 的话：res?.data?.name  尽管 babel 也有相似的插件实现该语法。
而且 ts 是向后兼容的, 也就 js 的语法都能够间接在 ts 都能够使用。

• 更谨严，能提前防止一些 bug 呈现，同时无利前期我的项目的保护

js 是解析式弱类型语言。比方，js 很多状况存在隐形转换，然而又是在运行时才报错, 这无疑给咱们埋了很多未知的坑, 特地是在一些大型项目中, 所以一些大型项目都投入 ts 的怀抱，例如 ant-design、vscode、还有行将公布的 vue3 版本 vue-next。ts 是要编译成 js 能力在浏览器中执行的，所以在编译过程中能够提醒咱们很多可能呈现谬误的中央，咱们以此纠正。

• 更好的开发体验

这个次要是编辑器更智能，更敌对的提醒。咱们当初的编辑器提醒性能次要是借助一些 Snippets 插件实现的，然而 ts 的 xx.d.ts 的申明文章对编辑器来说更智能，更敌对。能够说申明文件写的越残缺，编辑器越智能，例如

当初很多 npm 包都有了本人的 typescript 申明文件了, 没有的话能够在 DefinitelyTyped 下面找找, 或者本人写申明文件, 例如下面我写的 ”app”

declare module "app" {import { Store, Module} from "vuex";
  import {IState} from "@/store";
  type SubModuleOptions = {
    name: string;
    store?: Module<IState, any>; //TODO:Module<S, R> 中的 R 指的是 rootState, 应该 app 主我的项目还没革新成 typescript, 先用 any
    generator: (path: string) => () => Promise<Vue>;};
  interface System {registerModule(subModuleOptions: SubModuleOptions): void;
  }
  let system: System;
  let utils: Record<string, any>;
  let config: Record<string, string>;
  let request: Record<string, any>;
  let router: Record<string, any>;
  let store: Store<IState>;
}

更多对于 ts 的常识，请查看官网文档 https://www.typescriptlang.org/, 网上也有很多文章形容采纳 ts 的长处, 毛病。这里就不再开展了，上面开始咱们的正式内容。ヾ(≧▽≦*)o

新建一个空的 vue+typescript 的我的项目

新建一个基于 vue-cli3+ 的 typescript 我的项目, 网上有很多这种文档, 比方 https://segmentfault.com/a/1190000019905650, 留神抉择 Use class-style component syntax?  的时候咱们抉择 yes, 因为咱们须要用类组件。
比照与不反对 typescript 的 vue 我的项目，新的中央如下：

├─src
│  ├─main.ts
│  ├─shims-tsx.d.ts
│  └─shims-vue.d.ts
├─tsconfig.json

从名字能够看出这几个文件的作用，然而这里咱们先不必理睬。此外当然 package.json 和.eslintrc.js 中的配置也有些差异，比照发现，其余 package.json 只是多了vue-class-component、vue-property-decorator、typescript、@typescript-eslint/parser、@typescript-eslint/parser、@vue/cli-plugin-typescript、@vue/eslint-config-typescript   这几个包。

2. 利用这些不同点到现存的我的项目中

咱们要怎么利用这些不同点到现有的我的项目中呢，摸着石头过河，咱们在同样的目录构造下间接复制这些不同的新文件过去，而后减少 package.json 不存在的包，批改 main.js 为 main.ts(这里可能有坑)，复制.eslintrc.js 配置过去。
筹备好这些之后，删除 node_modules 从新 npm install  装置一次
​

3. 就地取材，依据我的项目具体情况配置

间接运行我的项目的话，可能会报很多相似的？Cannot find module ‘xxx’ or its corresponding type declarations. 的谬误，这是因为找不到对应报的申明文件。依据我的项目的具体情况，例如咱们的我的项目 vue、vuex、element-ui、app 等是通过 externals 形式引入的，所以在 package.json 中找不到对应的依赖，这样的话也没有这些包申明文件。还好 vue、vuex、element-ui 是提供申明文件的，咱们只须要把这些包装置成开发依赖 devDependencies，在前面的开发中咱们就能够应用这些申明文件了。然而 app 是主我的项目的 umd 包，也是没有申明文件的，这时候咱们就要针对 app 本人写申明文件了。最简略的就是在 src 目录下新建一个 typings 目录，在创立一个 app.d.ts, declare module "app"  申明就能够了，这样就不会报错了。更多申明文件怎么写能够参考 https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html。此外可能还有呈现其余的谬误，比方 eslint 谬误，这些要依据具体谬误具体解决了。

4. 利用 ts 进行业务开发

搭建好 ts 的开发环境之后，因为 ts 是向后兼容的，所以之前的业务代码全副不必改。前面用 ts 开发的话，学会应用 ts、vue-property-decorator 和 vue-class-component 就行了。前面有机会能够写 tsconfig 的配置，申明文件，vuex 这些内容了，感激大家的浏览了，有问题欢送沟通哈。