专栏名称: Fundebug
Fundebug为JavaScript、微信小程序及Node.js开发团队提供专业的线上代码bug监控和智能分析服务。
目录
相关文章推荐
前端早读课  ·  【招聘】字节跳动客服平台招高级前端开发工程师 ·  18 小时前  
前端早读课  ·  【第3455期】快手主站前端工程化探索：Gu ... ·  18 小时前  
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了 ·  昨天  
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了 ·  昨天  
前端大全  ·  前端行情变了，差别真的挺大。。。 ·  2 天前  
前端早读课  ·  【开源】TinyEngine开启新篇章，服务 ... ·  2 天前  
51好读  ›  专栏  ›  Fundebug

原有vue项目接入typescript

Fundebug  · 公众号  · 前端  · 2018-11-30 09:56

正文

作者 | 陈龙

为什么要接入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的相关配） 

  1. base: {
  2.   entry: {
  3.     ...
  4.     app: resolve('src/main.ts') // 把main.js改为main.ts
  5.   }
  6. ...
  7. resolve: {
  8.   ...
  9.   extensions: 




    
['vue', '.js', '.ts']
  10. }
  11. module: {
  12.   rules: [
  13.     ...,
  14.     {                           // 加入对文件的ts识别         
  15.       test: /\.ts$/,
  16.       exclude: /node_modules/,
  17.       enforce: 'pre',
  18.       loader: 'tslint-loader'
  19.     }, {
  20.       test: /\.tsx?$/,
  21.       loader: 'ts-loader',
  22.       exclude: /node_modules/,
  23.       options: {
  24.         appendTsSuffixTo:




    
 [/\.vue$/],
  25.       }
  26.     }
  27.   ]
  28. }

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

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

  1. {
  2.   "extends": "tslint-config-standard",
  3.   "globals": {
  4.     "require": true
  5.   }
  6. }

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

  1. {
  2.   "compilerOptions": {
  3.     // 编译目标平台
  4.     "target": "es5",
  5.     // 输出目录
  6.     "outDir": "./dist/",




    

  7.     // 添加需要的解析的语法，否则TS会检测出错。
  8.     "lib": ["es2015", "es2016", "dom"],
  9.     // 模块的解析
  10.     "moduleResolution": "node",
  11.     // 指定生成哪个模块系统代码
  12.     "module": "esnext",
  13.     // 在表达式和声明上有隐含的any类型时报错
  14.     "noImplicitAny": false,
  15.     // 把 ts 文件编译成 js 文件的时候，同时生成对应的 map 文件
  16.     "sourceMap": true,
  17.     // 允许编译javascript文件
  18.     "allowJs": true,
  19.     // 指定基础目录
  20.     "baseUrl": "./",
  21.     // 启用装饰器
  22.     




    
"experimentalDecorators": true,
  23.     // 移除注释
  24.     "removeComments": true,
  25.     "pretty": true,
  26.     // 是相对于"baseUrl"进行解析
  27.     "paths": {
  28.       "vue": ["node_modules/vue/types"],
  29.       "@/*": ["src/*"]
  30.     }
  31.   },
  32.   "include": [
  33.     "src/**/*"
  34.   ],
  35.   "exclude": [
  36.     "node_modules"
  37.   ]
  38. }

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

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

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

  1. /**
  2.  * 告诉 TypeScript *.vue 后缀的文件可以交给 vue 模块来处理
  3.  * 而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。
  4.  * 原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件
  5.  */
  6. declare module "*.vue" {
  7.   import Vue from 'vue'
  8.   export default Vue
  9. }
  10. /**
  11.  * 告诉 TypeScript window是个全局对象，直接可用，这样就不会在window.xx = 123时报错
  12.  */
  13. declare var window: any
  14. /**
  15.  * 引入部分第三方库/自己编写的模块的时候需要额外声明文件
  16.  * 引入的时候，需要使用类似 import VueLazyLaod from 'vue-lazyload' 的写法
  17.  */
  18. declare module 'vue-lazyload'
  19. declare 




    
module '@zz/perf/vue'
  20. declare module 'raven-js'
  21. declare module 'raven-js/plugins/vue'

将src/main.js改为main.ts

项目改造

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

  • 基础库改造

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

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

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

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


  1. export default class URL{
  2.   /**
  3.    * @memberOf URL
  4.    * @summary 获取当前页面连接中指定参数
  5.    * @type {function}
  6.    * @param {string} param1                     - 如果param2为undefined，param1是指从当前页面url中获取指定参数的key, 如果param2不为空，param1为指定的url
  7.    * @param {string} param2                     - 可选参数，如果param2存在，则从指定的param1连接中获取对应参数的key
  8.    * @return {string|null}
  9.    */
  10.   static getParam (param1, param2) {
  11.     let url = ''
  12.     let param = null;
  13.     // 如果只有一个参数，默认从当前页面链接获取参数




    

  14.     if (typeof param2 === 'undefined') {
  15.       url = window && window.location.href || ''
  16.       param = param1
  17.     // 从指定url中获取参数
  18.     } else {
  19.       url = param1
  20.       param = param2
  21.     }
  22.     // 排除hash的影响
  23.     url = url.split('#')[0]
  24.     if (url.indexOf('?') > -1) {
  25.       url = url.split




    
('?')[1]
  26.     }
  27.     const reg = new RegExp('(^|&)' + param + '=([^&]*)[$]*', 'i')
  28.     const rstArr = url.match(reg)
  29.     if (rstArr !== null) {
  30.       return decodeURIComponent(rstArr[2])
  31.     }
  32.     return null
  33.   }
  34.   ...
  35. }

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

  1. export default class URL {
  2.   




    
/**
  3.    * @memberOf URL
  4.    * @summary 获取url中指定参数
  5.    * @type {function}
  6.    * @param {string} param1                     - 如果param2为undefined，param1是指从当前页面url中获取指定参数的key, 如果param2不为空，param1为指定的url
  7.    * @param {string} param2                     - 可选参数，如果param2存在，则从指定的param1连接中获取对应参数的key
  8.    * @return {string|null}
  9.    */
  10.   static getParam (param1: string, param2?: string): string {
  11.     let url: string = ''
  12.     let param = null
  13.     // 如果只有一个参数，默认从当前页面链接获取参数
  14.     if (typeof param2 === 'undefined') {
  15.       url = window && window.location.href || ''
  16.       param =




    
 param1
  17.     // 从指定url中获取参数
  18.     } else {
  19.       url = param1
  20.       param = param2
  21.     }
  22.     url = url.split('#')[0]
  23.     if (url.indexOf('?') > -1) {
  24.       url = url.split('?')[1]
  25.     }
  26.     const reg = new RegExp('(^|&)' + param + '=([^&]*)[$]*', 'i')
  27.     const rstArr = url




    
.match(reg)
  28.     if (rstArr !== null) {
  29.       return decodeURIComponent(rstArr[2])
  30.     }
  31.     return null
  32.   }
  33.   ...
  34. }

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

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

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

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

  • vue文件改造

src/components/helper/newUser/index.vue 

  1. ...
  3. import { LEGO_ATTR, initLegoData, legic } from '@/lib/legic'
  4. import { getMyProfile } from '@/api/helper'
  5. import { toast }




    
 from '@/lib/ZZSDK'
  6. import myComponent from './myComponent.vue'
  7. let flag = false // 是否发送视频点击埋点
  8. export default {
  9.   components: {
  10.     // 自定义组件
  11.     myComponent
  12.   },
  13.   data () {
  14.     return {
  15.       // 用户头像
  16.       portrait: '',
  17.       // 用户名称
  18.       nickName: '',
  19.       // 是否点击播放
  20.       isPlay: false
  21.     }
  22.   },
  23.   mounted 




    
() {
  24.     this.initData()
  25.     initLegoData({
  26.       type: 'newUserGuide'
  27.     });
  28.     legic(LEGO_ATTR.newUserGuide.SHOW);
  29.   },
  30.   methods: {
  31.     initData () {
  32.       getMyProfile().then(data => {
  33.         console.log('data', data)
  34.         const { respData } = data
  35.         this.portrait = respData.portrait || ''
  36.         this.nickName =




    
 respData.nickname || ''
  37.       }).catch(err => {
  38.         toast({ msg: err })
  39.       })
  40.     },
  41.     goPageClick (type) {
  42.       switch (type) {
  43.         case 'SUN':
  44.           legic(LEGO_ATTR.newUserGuide.SUNVILLAGECLICK)
  45.           break
  46.         case 'FOOTBALL':
  47.           legic(LEGO_ATTR.newUserGuide.FOOTBALLCLICK)
  48.           break
  49.         case 'SIGN':
  50.           legic




    
(LEGO_ATTR.newUserGuide.SIGNCLICK)
  51.           break
  52.         default:
  53.           return
  54.       }
  55.     },
  56.     videoClick () {
  57.       if (flag) {
  58.         return
  59.       } else {
  60.         flag = true
  61.         legic(LEGO_ATTR.newUserGuide.SIGNCLICK)
  62.         this.isPlay = true
  63.         this.$refs.video.play()
  64.       }
  65.     




    
}
  66.   }
  67. }

改造后 

  1. ...






请到「今天看啥」查看全文


推荐文章
前端早读课  ·  【招聘】字节跳动客服平台招高级前端开发工程师
18 小时前
前端早读课  ·  【第3455期】快手主站前端工程化探索：Gundam 脚手架在新春除夕项目中的实践与展望
18 小时前
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了
昨天
歸藏的AI工具箱  ·  终于有给设计师用的 Cursor 了
昨天
前端大全  ·  前端行情变了，差别真的挺大。。。
2 天前
前端早读课  ·  【开源】TinyEngine开启新篇章，服务端Java版本正式开源~
2 天前
海报网  ·  舒畅瘦成人干堪比"整容"，到底中了什么毒？
7 年前
黄三角早报  ·  太生猛！山东这位女司机停不进车位竟用手抬！最后…视频看完笑疯了
7 年前
北京晨报  ·  【趣读】说脏话为什么爽歪歪？
7 年前
鲁中晨报  ·  充值92次被骗近35万，淄博法院审理一“网络主播裸聊”诈骗案！
7 年前
航旅圈  ·  民航夜话|吉祥更新机队涂装 春秋计划恢复部分赴韩航班
7 年前
Sov5搜索   ·   小百科   ·   今天看啥   ·   移动版
51好读 - 好文章就要读起来!