Vue3 携手 TypeScript 搭建完整项目结构

TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 …

TypeScript 是JS的一个超级,主要提供了类型系统和对ES6的支持,使用 TypeScript 可以增加代码的可读性和可维护性,在 react 和 vue 社区中也越来越多人开始使用TypeScript。从最近发布的 Vue3 正式版本来看, Vue3 的源码就是用 TypeScript 编写的,更好的 TypeScript 支持也是这一次升级的亮点。当然,在实际开发中如何正确拥抱 TypeScript 也是迁移至 Vue3 的一个小痛点,这里就针对 Vue3 和 TypeScript 展开一些交流。

96.8%的代码都是TypeScript,支持的力度也是相当大💪

Vue3入口: https://github.com/vuejs/vue-next

一、项目搭建

在官方仓库的 Quickstart 中推荐用两种方式方式来构建我们的 SPA 项目:

vite

vue-cli

vite 是一个由原生ESM驱动的Web开发构建工具,打开 vite 依赖的 package.json 可以发现在 devDependencies 开发依赖里面已经引入了TypeScript ,甚至还有 vuex , vue-router , less , sass 这些本地开发经常需要用到的工具。vite 轻量,开箱即用的特点,满足了大部分开发场景的需求,作为快速启动本地 Vue 项目来说,这是一个非常完美的工具。

后面的演示代码也是用vite搭的

从 vue2.x 走过来的掘友肯定知道 vue-cli 这个官方脚手架, vue3 的更新怎么能少得了 vue-cli 呢, vue-cli 更强调的是用 cli 的方式进行交互式的配置,选择起来更加灵活可控。丰富的官方插件适配,GUI的创建管理界面,标准化开发流程,这些都是 vue-cli 的特点。

vue-cli ✖ TypeScript STEP1

vue-cli ✖ TypeScript STEP2

想要预装TypeScript,就需要选择手动配置,并check好TypeScript

忘记使用选择 TypeScript 也没事,加一行cli命令就行了

最后,别忘了在 .vue 代码中,给 script 标签加上 lang="ts"

二、Option API风格

在 Vue2.x 使用过 TypeScript 的掘友肯定知道引入 TypeScript 不是一件简单的事情:

  1. 要用 vue-class-component 强化 vue 组件,让 Script 支持 TypeScript 装饰器

  2. 用 vue-property-decorator 来增加更多结合 Vue 特性的装饰器

  3. 引入 ts-loader 让 webpack 识别 .ts .tsx 文件

  4. …..

然后出来的代码风格是这样的:

class 风格的组件,各种装饰器穿插在代码中,有点感觉自己不是在写 vue ,些许凌乱🙈,所以这种曲线救国的方案在 vue3 里面肯定是行不通的。

在 vue3 中可以直接这么写:

vue 对 props 进行复杂类型验证的时候,就直接用 PropType 进行强制转换, data 中返回的数据也能在不显式定义类型的时候推断出大多类型, computed 也只用返回类型的计算属性即可,代码清晰,逻辑简单,同时也保证了 vue 结构的完整性。

三、Composition API风格

在 vue3 的 Composition API 代码风格中,比较有代表性的api就是 ref 和 reactive ,我们看看这两个是如何做类型声明的:

ref

分析上面的代码,可以发现如果我们不给定 ref 定义的类型的话, vue3 也能根据初始值来进行类型推导,然后需要指定复杂类型的时候简单传递一个泛型即可。

Tips:

如果只有setup方法的话,可以直接在defineComponent中传入setup函数

reactive

声明 reactive 的时候就很推荐使用接口了,然后怎么使用类型断言就有很多种选择了,这是 TypeScript 的语法糖,本质上都是一样的。

四、自定义Hooks

vue3 借鉴 react hooks 开发出了 Composition API ,那么也就意味着 Composition API 也能进行自定义封装 hooks ,接下来我们就用 TypeScript 风格封装一个计数器逻辑的 hooks ( useCount ):

首先来看看这个 hooks 怎么使用:

出来的效果就是:

贴上 useCount 的源码:

分析源码

这里首先是对 hooks 函数的入参类型和返回类型进行了定义,入参的 Range 和返回的 Result 分别用一个接口来指定,这样做了以后,最大的好处就是在使用 useCount 函数的时候,ide就会自动提示哪些参数是必填项,各个参数的类型是什么,防止业务逻辑出错。

接下来,在增加 inc 和减少 dec 的两个函数中增加了 typeo 类型守卫检查,因为传入的 delta 类型值在某些特定场景下不是很确定,比如在 template 中调用方法的话,类型检查可能会失效,传入的类型就是一个原生的 Event 。

关于 ref 类型值,这里并没有特别声明类型,因为 vue3 会进行自动类型推导,但如果是复杂类型的话可以采用类型断言的方式:ref(initObj) as Ref<ObjType>

五、小建议 💡

AnyScript

在初期使用 TypeScript 的时候,很多掘友都很喜欢使用 any 类型,硬生生把TypeScript 写成了 AnyScript ,虽然使用起来很方便,但是这就失去了 TypeScript 的类型检查意义了,当然写类型的习惯是需要慢慢去养成的,不用急于一时。

Vetur

vetur 代码检查工具在写vue代码的时候会非常有用,就像构建 vue 项目少不了 vue-cli 一样,vetur 提供了 vscode 的插件支持,赶着升级 vue3 这一波工作,顺带也把 vetur 也带上吧。

2bb77678b42bb1a2d165ab40726988d8.png

六、一个完整的Vue3+ts项目

.vue写法

tsx写法

七、结束

不知不觉, Vue 都到3的One Piece时代了, Vue3 的新特性让拥抱 TypeScript 的姿势更加从容优雅, Vue 面向大型项目开发也更加有底气了

好了看到现在的您是否有学到呢?如有疑问可以写在下方评论中,让我一起讨论一番吧!!!

本文来自网络,不代表软粉网立场,转载请注明出处:https://www.rfff.net/p/1164.html

作者: HUI

发表评论

您的电子邮箱地址不会被公开。

返回顶部