原有 Vue 项目接入 TypeScript

栏目: 编程语言 · 发布时间: 5年前

内容简介:javascript由于自身的弱类型,使用起来非常灵活。这也就为大型项目、多人协作开发埋下了很多隐患。如果是自己的私有业务倒无所谓,主要是对外接口和公共方法,对接起来非常头疼。主要表现在几方面:这就非常不利于工程标准化。于是我们决定引入typescript进行代码层面的强校验。

作者 | 陈龙

为什么要接入typescript

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

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

  1. 参数类型没有校验,怎么传都有,有时会出现一些由于类型转换带来的未知问题。

  2. 接口文档不规范,每次都要通过读代码才能知道传什么,怎么传

  3. 接口编写符合规范,但是公共库中有大量的处理类型校验的代码

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

概览

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

  1. 安装typescript相关npm包

  2. 修改webpack和ts配置文件

  3. 项目公共库和vue文件改造

ok,我们开始

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的相关配)

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

  • 在根目录下创建tslint.json(类似eslint,这里设定一个校验标准)

  • 在根目录创建tsconfig.json(typescript配置文件)

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

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

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

将src/main.js改为main.ts

项目改造

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

  • 基础库改造

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

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

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

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

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

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

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

注:对于一个大型项目来讲,我们并不建议上来就对全部的文件进行ts改造。

我们更建议采用渐进式改造方案,在不影响原有页面的情况下,逐一改造。具体方案后面会介绍

  • vue文件改造

src/components/helper/newUser/index.vue

改造后

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

这里需要注意的是:

  • 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' 这样可以一点点改造整个项目,同时未改造的页面照样可以运行。

ok以上就是我们改造的全部过程。 有什么问题可以指正,大家互相学习

原有 Vue 项目接入 TypeScript


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

马云如是说

马云如是说

朱甫 / 中国经济出版社 / 2008-1-1 / 39.80元

任何一个企业家的成功,都需要一种特立独行的精神。换尔言之,他一定是不断地否定别人的反对意见,坚持自己独特的观点,才能够真正走向大成功。在中国企业家群像里,马云就是这样一个特立独行的人。 目录 *永不放弃——马云论创业精神 *天下没有难做的生意——马云论经营理念 *B2B时代——马云论电子商务 *网络只是一个工具——马云论互联网与网络公司 *太多钱会坏事——马云论......一起来看看 《马云如是说》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

RGB HSV 转换
RGB HSV 转换

RGB HSV 互转工具