在TypeScript下，Vue项目如何写出更可维护性代码？

最新推荐文章于 2022-10-31 08:19:09 发布

Weybn

最新推荐文章于 2022-10-31 08:19:09 发布

阅读量1.2k

点赞数 1

分类专栏： TypeScript Vue

本文链接：https://blog.csdn.net/Ancecis/article/details/103529185

版权

本文探讨了在TypeScript环境下，如何通过其强类型特性提升Vue项目的可维护性。通过分析为何使用TypeScript，详细阐述了在API层、Store层和业务逻辑层的具体实现策略，强调了类型检查在接口定制和错误预防中的作用，以及Vue项目在TypeScript和JavaScript下的区别。

摘要由CSDN通过智能技术生成

在TypeScript下，Vue项目如何写出更可维护性代码？

一、目录

文章目录

在TypeScript下，Vue项目如何写出更可维护性代码？

二、总体分析

1.为什么要用TypeScript来构建我们的项目？

JavaScript是一个门弱类型、动态类型语言。怎么表现呢？可能一个变量它上一秒是一个数字，下一秒就变成了一个字符串，再下一秒它就是成了一个对象的引用，这就是动态类型，而动态类型的基础就是弱类型，或者说无类型。

弱类型的语言写起来非常舒服，完全不需要考虑到它的类型，需要的时候就声明一个来用，不需要的时候也不用去管他（垃圾自动回收机制）。这样就导致了很多编程爱好者或者说开发者在使用的时候并不会考虑到编程的严谨性，会很随意去使用变量（表现是实现变量的复用，可能用同一个变量去指向对象、指向数字等等）。这样开发的时候很随意，但是维护起来的话，可能需要去看一堆注释或者重构。可以这么说，这种是非常不负责任的行为。那么如何去避免这种情况的发生呢？当然是给变量加个类型，这个类型就限定变量只能从一类型而终，而不会中途变成其他类型。那么就引入了一个叫做TypeScript的东西（下称TS），TS并不是一门语言，而是一个JS的超集，也就是说它可以完全写成JS，但是也可以比JS写更多的东西，并且它最后编译成为JS，和普通的JS没有什么区别。

2.为什么TypeScript它就更可维护了？

TS可以自定义类型，如果你想要一个变量始终指向一个字符串，那就把它定义成为一个String类型，如果想要它始终是一个数字，那就定义成一个Number，这样如果在开发的时候，错误地赋值为一个不想要的类型的数据的时候它会报错。这样在某种程度上可以减少bug的产生。

上面只是TS的一个小小的应用，它在Vue中更好用的地方则在于请求的接口的编写上面（除了Vue之外，React, Angular中也是这样子的）。好处是在于请求数据的定制上面，我们可以根据接口写出这个项目调用的API，然后定制请求这个API的请求数据的类型，这样我们在写请求接口的时候，会很少发生400BadRequest（参数类型错误）这个错误，我们就会很省心。

TS的类型提示以及纠错的功能让整个项目在开发维护过程中更加方便，让类型检测的任务交给机器来检测而不是人工检测。这样出错率可以看做降到了0%，从而降低了开发维护的成本。并且如果你使用了TypeScript，那么意味着你可以使用全部的JS的ES2018附近版本的特性，很多语法糖能够加速我们的开发速度。这是非常好的一件事情。

3.在TypeScript下，Vue项目和在JavaScript下的Vue项目有什么不同？

首先看一下使用TS的时候的目录情况吧，这个是我最近的一个项目的项目目录：

在这里插入图片描述

然后我上了我的github上找到一个有237star的一个项目的目录

在这里插入图片描述

大家很明显可以看出两个项目的目录的区别，首先views目录和component这两个目录不看，我们很明显能够看到我的项目有一个api目录。这个目录就是存放所有的接口文件，所有在接口文档上存放的、与这个项目有关的接口，都会在这个api目录下面存在，这个目录的只写api，不做任何处理，暂且我们把它叫做接口调用层，这里我们就不谈具体细节，后面会细细讲述。