✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
Scaffolding project in ./<your-project-name>...
Done.
原文链接:https://mp.weixin.qq.com/s/1taU2Jlur3uU1IS-qc92uA 原文来源:微信公众号“前端开发爱好者”
至于技术栈为什么由
react
转向vue3
,也是因为今年换了新工作,公司技术栈以vue3
为主,刚好前段时间又接手了一个项目,就直接采用Vue3
script setup
typescript
开发,于是今天就想给大家分享下script setup
结合typescript
使用的一些技巧,如果这些技巧能够帮助到你,记得给我点个赞呦 👍环境搭建
环境搭建这里就不详细介绍了,可以直接使用官方的方式创建
这一指令将会安装并执行
create-vue
,它是Vue
官方的项目脚手架工具。你将会看到一些诸如TypeScript
和测试
支持之类的可选功能提示:如果不确定是否要开启某个功能,你可以直接按下回车键选择
No
。在项目被创建后,通过以下步骤安装依赖并启动开发服务器:想看更多的
详细配置
的同学,可以移步到我之前的一篇文章中:这里就不做过多的讲解了,这篇文章的重点还是在
script setup
typescript
结合使用上ref()
ref()
接受一个内部值,返回一个响应式的、可更改的ref
对象,此对象只有一个指向其内部值的property .value
。类型定义
为 ref() 标注类型
ref()
标注类型有三种方式:ref()
增加类型interface
然后泛型参数的形式传入Ref
这个类型为ref
内的值指定一个更复杂的类型三种方式推荐
比较推荐使用
前两种
方式,前两种方式其实都是以泛型
的形式来标注类型的第三种方式需要额外的引入:
所以不是很推荐(本着能少写一行是一行原则)
reactive()
reactive()
返回一个对象的响应式代理。类型定义
为 reactive() 标注类型
reactive()
标注类型有两种方式:reactive()
增加类型两种方式推荐
不推荐
使用reactive()
的泛型参数,因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。推荐直接给声明的变量添加类型
。computed ()
接受一个
getter
函数,返回一个只读的响应式ref
对象,即getter
函数的返回值。它也可以接受一个带有get
和set
函数的对象来创建一个可写的ref
对象。类型定义
为 computed() 标注类型
computed()
标注类型有两种方式:computed()
类型两种方式推荐
自动推导类型虽然简单快捷,但是还是希望
手动
的去指定
其类型,这样更加利于代码的可维护性,所以这里推荐大家使用通过泛型参数显式指定computed()
类型defineProps()
为了在声明
props
选项时获得完整的类型推断支持,我们可以使用defineProps
API,它将自动地在script setup
中使用为 defineProps() 标注类型
props
的类型当然了,我们也可以把以上的泛型参数定义成一个单独的
interface
目前官方也给出了解决方案,但是目前这个方案还处于实验性,并且需要
显式地选择开启
。通过对
defineProps()
的响应性解构来添加默认值:defineEmits()
为了在声明
emits
选项时获得完整的类型推断支持,我们可以使用defineEmits
API,它将自动地在script setup
中使用为 defineEmits() 标注类型
defineEmits()
标注类型直接推荐泛型
形式虽然官方还推荐了
运行时
自动推导的一种形式,但是本人不是很推荐defineExpose()
defineExpose()
编译器宏来显式指定在script setup
组件中要暴露出去的property
,使得父组件通过模板ref
的方式获取到当前组件的实例为 defineExpose() 标注类型
defineExpose()
类型推导直接使用参数类型自动推导即可provide()
provide()
供给一个值,可以被后代组件注入类型定义
为 provide() 标注类型
为
provide()
标注类型, Vue 提供了一个InjectionKey
接口,它是一个继承自Symbol
的泛型类型,可以用来在提供者和消费者之间同步注入值的类型以上方式是通过定义 key 的类型来标注类型的,还有一种方式直接
key
采用字符串
的形式添加inject()
inject()
注入一个由祖先组件或整个应用供给的值类型定义
为 inject() 标注类型
provide()
的key
的类型是声明式提供的话(provide()类型标注的第一种形式)inject()
可以直接导入声明的key
来获取父级组件提供的值如果
provide()
的key
直接使用的字符串
形式添加的, 需要通过泛型参数声明模板 ref
模板
ref
需要通过一个显式指定的泛型参数
和一个初始值 null
来创建:组件 ref
有时,你可能需要为一个子组件添加一个模板 ref,以便调用它公开的方法
为了获取
MyModal
的类型,我们首先需要通过typeof
得到其类型,再使用TypeScript
内置的InstanceType
工具类型来获取其实例类型:事件处理器
原生的 DOM 事件标注类型