2024-07-21发表2025-03-15更新VUE

Vue3+TS开发环境创建

Vue3 + TS开发环境创建

1. 创建环境

vite除了支持基础阶段的纯TS环境之外，还支持 Vue + TS开发环境的快速创建, 命令如下：

1 2	$ npm create vite@latest vue-ts-pro -- --template vue-ts //yarn create vite vue-ts-pro --template vue-ts

说明：

npm create vite@latest 基于最新版本的vite进行项目创建
vue-ts-pro 项目名称
– –template vue-ts 选择Vue + TS的开发模板

2. 和.vue文件相关的工具

开发阶段

Volar工具对.vue文件进行实时的类型错误反馈
TypeScript Vue Plugin 工具用于支持在 TS 中 import *.vue 文件

打包阶段
vue-tsc工具负责打包时最终的类型检查

好处：开发阶段的类型提示交给IDE做，保证vite的运行速度，打包阶段做’兜底类型校验’，确保类型无误

为Ref标注类型

1. 场景和好处

为ref标注类型之后，既可以在给ref对象的value赋值时校验数据类型，同时在使用value的时候可以获得代码提示

说明：本质上是给ref对象的value属性添加类型约束

2. 如何标注

ref 函数和 TS 的配合通常分为俩种情况，类型推导和泛型指定类型

如果是简单的数据，推荐使用类型推导
如果是较复杂的数据，通过泛型指定类型

为reactive标注类型

为reactive标注类型之后，既可以在响应式对象在修改属性值的时候约束类型，也可以在使用时获得代码提示

reactive函数和TS的配合通常分为俩种情况，类型推导和显式标注

如果根据默认参数对象推导的类型符合要求，推荐使用类型推导

如果根据默认对象推导不出我们想要的类型，推荐使用类型别名给变量显式注解对应类型
说明: 显式注解变量之后除了对属性赋值的时候做了类型约束而且要求reactive的初始值也需要满足类型要求

为computed标注类型

计算属性通常由已知的响应式数据计算得到，所以依赖的数据类型一旦确定通过自动推导就可以知道计算属性的类型另外根据最佳实践，计算属性多数情况下是只读的，不做修改，所以配合TS一般只做代码提示

inject/provide

//祖父控件中
const consult = ref<ConsultOrder>
provide('consult',consult)
//子控件
const consult = inject<Ref<ConsultOrder>>('consult')

为事件处理函数标注类型

1. 为什么需要标注类型

原生dom事件处理函数的参数默认会自动标注为any类型，没有任何类型提示，为了获得良好的类型提示，需要手动标注类型

2. 如何标注类型

给事件对象形参 e 标注为Event类型，可以获得事件对象的相关类型提示
如果需要更加精确的DOM类型提示可以使用断言（as）进行操作

为模版引用标注类型

1. 为什么需要类型标注

给模版引用标注类型，本质上是给ref对象的value属性添加了类型约束，约定value属性中存放的是特定类型的DOM对象，从而在使用的时候获得相应的代码提示

2. 如何进行类型标注

通过具体的DOM类型联合null做为泛型参数, 比如我们想获取一个input dom元素

对象的非空值处理

1. 空值场景说明

当对象的属性可能是 null 或 undefined 的时候，称之为“空值”，尝试访问空值身上的属性或者方法会发生类型错误

说明：inputRef变量在组件挂载完毕之前，value属性中存放的值为null，不是input dom对象，通不过类型校验

2. 可选链方案

可选链 ?. 是一种访问嵌套对象属性的安全的方式, 可选链前面的值为 undefined 或者 null时，它会停止运算

3. 逻辑判断方案

通过逻辑判断，只有有值的时候才继续执行后面的属性访问语句

4. 非空断言方案

非空断言（!）是指我们开发者明确知道当前的值一定不是null或者undefined，让TS通过类型校验

特别注意：使用非空断言要格外小心，它没有实际的JS判断逻辑，只是通过了TS的类型校验，容易直接把空值出现在实际的执行环境里

为组件的Props标注类型

1. 为什么给Props标注类型

给组件的Props标注类型有俩个作用，一个是确保传递的prop是类型安全的，另一个在组件内部使用的时候也会有类型提示

2. 基础使用

语法：通过defineProps宏函数对组件props进行类型标注
需求：按钮组件有俩个prop参数，color类型为string且为必填，size类型为string且为可选，怎么定义类型？

说明：按钮组件传递prop属性的时候必须满足color是必传项且类型为string, size为可选属性，类型为string