Vue项目如何接入Typescript

￡神魔★判官ぃ 2022-04-12 02:28 647阅读 0赞

(内容同步自小邹的头条号：[沪漂程序员的生活史][Link 1])

# **一、为什么要接入typescript** #

avascript由于自身的弱类型，使用起来非常灵活。

这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓，主要是对外接口和公共方法，对接起来非常头疼。主要表现在几方面：

1.  参数类型没有校验，怎么传都有，有时会出现一些由于类型转换带来的未知问题。
2.  接口文档不规范，每次都要通过读代码才能知道传什么，怎么传
3.  接口编写符合规范，但是公共库中有大量的处理类型校验的代码

这就非常不利于工程标准化。于是我们决定引入typescript进行代码层面的强校验。

**原有vue项目接入ts主要包含下面几大步骤：**

1.  安装typescript相关npm包
2.  修改webpack和ts配置文件
3.  项目公共库和vue文件改造

**1. 安装typescript相关npm包**

这块有个非常重要的点需要注意：

**就是要根据你本地的环境，去升级对应版本的typescript**

这块是很多初次使用的同学都会遇到的问题。

因为只是看到了官网的教程，一步一步安装完发现各种报错。主要问题就是webpack版本不匹配，或者其他一些npm包版本不匹配

以我本地为例：

我本地环境是webpack3，所以直接安装最新版本的typescript，控制台会报错webpack版本过低的问题。

所以你要不把自己的webpack升级到webapck4.要不就采用与之相匹配的typescript版本。

我选择的是后者，因为直接给自己的项目升级到webapck4，会花费更长的时间。我们用的脚手架是公司内部统一的。里面集成了很多底层通用的基础服务。冒然升级webpack4会带来更大的麻烦，更何况项目时间比较紧迫，你懂得。

下面是我安装的包和对应的版本：

*  "typescript": "^3.1.4" (这个是必须的，ts库)
 *  "ts-loader": "^3.5.0" (识别ts的laoder)
 *  "tslint": "^5.11.0" (tslint校验库)
 *  "tslint-loader": "^3.5.4" (tslint的loader)
 *  "tslint-config-standard": "^8.0.1" (用于tslint默认校验规则)
 *  "vue-property-decorator": "^7.2.0" (用于在.vue文件中使用ts语法)

**2. 修改配置文件**

修改webpack配置文件（加入ts的相关配）

![05f0414aed5b4c9ca8e6b4c7a78795d4][]

**注意： main.js改成main.ts后，还要做一些改造，这个比较简单，按照tslint的错误提示改就可以了**

在根目录下创建tslint.json（类似eslint，这里设定一个校验标准）

![b247c8bbb6c04b52b0c881626cf6c7e0][]

在根目录创建tsconfig.json（typescript配置文件）

![d9e20eb5d7664c1c970c98605b2eee64][]

在src目录下创建sfc.d.ts（用来声明全局变量、class、module、function、命名空间）

我们在这里主要是让ts识别.vue文件、window对象和一些module

具体declare的使用方式请看这里 (https://www.tslang.cn/docs/handbook/declaration-files/by-example.html)

![fe675352694845949b77d4c0dfc4abed][]

将src/main.js改为main.ts

**3.项目改造**

这个部分是最麻烦的，主要有几大块

*  基础库改造

如果你的基础库引用了大量的npm包，那么恭喜你，这部分你的改造成本会低很多。

如果你的lib库有相当一部分都是自己手写的，那么，我也得恭喜你。。。

我们自己的lib库里，有大量的自己维护的js文件。那么如果你要进行ts改造的话，通通都要改。

举个例子： lib/url.js 中的getParam (算法并不高级，就是易读、兼容性好)

![2a7cc1e5925e4bf8a39449d405ad32f5][]

改造后的文件为：lib/url.ts

![4ab72ebe937f405eac5f43be04a76433][]

对于一个方法多种调用方式，如果你想完全改成typescript推荐的方式，你可以用到方法重载。(https://www.tslang.cn/docs/handbook/functions.html)

我没有用是因为我不希望改变原有页面的使用方式。

> 注：对于一个大型项目来讲，我们并不建议上来就对全部的文件进行ts改造。我们更建议采用渐进式改造方案，在不影响原有页面的情况下，逐一改造。具体方案后面会介绍

*  vue文件改造

src/components/helper/newUser/index.vue

![0e98707303644707af15750ebd2b86dd][]

改造后

![df48bb30c01d4e55ba7321754f51ca58][]

myComponent.vue改造前略，这里只展示改造后的组件

![1dc804add4684279a76976653755aa8c][]

这里需要注意的是：

*  ts默认不会识别.vue文件，所以需要在sfc.d.ts文件中声明，同时在引入vue组件时，要加.vue后缀
 *  引入vue-property-decorator插件。采用修饰符的方式进行组件注册，这样里面的data、prop和function都通过扁平化方式调用（这也是官方推荐的方式）
 *  ts中import引入文件，如果不写后缀，默认是js文件。如果js文件没有，则才识别ts文件

现在说下前面提到的改造方案：

这里其实主要涉及.vue文件和lib库的改造，vue文件没啥可说的，一个个改就可以了。主要说lib里面的文件，这里我建议：

*  一开始保留原来的js文件，并不删除。这样目前尚未改造的文件可以继续使用
 *  新建对应的ts文件，比如lib中有util.js，新创建util.ts
 *  新改造的vue文件通通引入lib库中xx.ts（要加.ts后缀）,如import Util from '@/lib/util.ts' 这样可以一点点改造整个项目，同时未改造的页面照样可以运行。

[Link 1]: https://www.toutiao.com/i6629529731266003463/
[05f0414aed5b4c9ca8e6b4c7a78795d4]: http://p3.pstatp.com/large/pgc-image/05f0414aed5b4c9ca8e6b4c7a78795d4
[b247c8bbb6c04b52b0c881626cf6c7e0]: http://p3.pstatp.com/large/pgc-image/b247c8bbb6c04b52b0c881626cf6c7e0
[d9e20eb5d7664c1c970c98605b2eee64]: http://p99.pstatp.com/large/pgc-image/d9e20eb5d7664c1c970c98605b2eee64
[fe675352694845949b77d4c0dfc4abed]: http://p99.pstatp.com/large/pgc-image/fe675352694845949b77d4c0dfc4abed
[2a7cc1e5925e4bf8a39449d405ad32f5]: http://p99.pstatp.com/large/pgc-image/2a7cc1e5925e4bf8a39449d405ad32f5
[4ab72ebe937f405eac5f43be04a76433]: http://p3.pstatp.com/large/pgc-image/4ab72ebe937f405eac5f43be04a76433
[0e98707303644707af15750ebd2b86dd]: http://p99.pstatp.com/large/pgc-image/0e98707303644707af15750ebd2b86dd
[df48bb30c01d4e55ba7321754f51ca58]: http://p99.pstatp.com/large/pgc-image/df48bb30c01d4e55ba7321754f51ca58
[1dc804add4684279a76976653755aa8c]: http://p99.pstatp.com/large/pgc-image/1dc804add4684279a76976653755aa8c