TS类型声明的方法之二

简介: TS类型声明的方法之二

为 emits 标注类型

<script setup lang="ts">
// 运行时
const emit = defineEmits(['change', 'update'])
// 基于类型
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>
import { defineComponent } from 'vue'
export default defineComponent({
  emits: ['change'],
  setup(props, { emit }) {
    emit('change') // <-- 类型检查 / 自动补全
  }
})       

为 ref() 标注类型

默认推导类型

ref 会根据初始化时的值自动推导其类型:

import { ref } from 'vue'
 
// 推导出的类型:Ref<number>
 
const year = ref(2020)
 
// => TS Error: Type 'string' is not assignable to type 'number'.
 
year.value = '2020'
通过接口指定类型

有时我们可能想为 ref 内的值指定一个更复杂的类型,可以通过使用 Ref 这个接口:

import { ref } from 'vue'
 
import type { Ref } from 'vue'
 
const year: Ref<string | number> = ref('2020')
 
year.value = 2020 // 成功!
通过泛型指定类型

或者,在调用 ref() 时传入一个泛型参数,来覆盖默认的推导行为:

// 得到的类型:Ref<string | number>
 
const year = ref<string | number>('2020')
 
year.value = 2020 // 成功!

如果你指定了一个泛型参数但没有给出初始值,那么最后得到的就将是一个包含 undefined 的联合类型:

// 推导得到的类型:Ref<number | undefined>
 
const n = ref<number>()


目录
打赏
0
0
0
0
15
分享
相关文章
使用Matplotlib创建不同类型图表的案例
使用Matplotlib创建不同类型图表的案例
89 2
webp格式图片在html里不显示的解决方法
webp格式图片在html里不显示的解决方法
1513 0
webp格式图片在html里不显示的解决方法
数据驱动开发:如何将数据分析融入开发流程
【8月更文挑战第14天】数据驱动开发是一种高效、智能的软件开发方法论,它通过将数据分析深度融入开发流程中,实现了精准决策、提升效率和持续改进的目标。为了成功实施数据驱动开发,团队需要明确数据需求、设计合理的数据架构、集成数据收集工具、实施CI/CD流程、进行数据分析与决策支持以及建立反馈循环机制。同时,还需要应对数据质量、技术和组织与文化等挑战。通过不断努力和实践,团队可以逐步建立起完善的数据驱动开发体系,推动产品不断迭代升级和业务持续增长。
|
8月前
|
perl之print,printf,sprintf使用案例详解
perl之print,printf,sprintf使用案例详解
236 21
CTF—GIF文件格式、隐写方法及案例
CTF—GIF文件格式、隐写方法及案例
356 0
QString字符串的查找与截取实例
QString字符串的查找与截取实例
380 1
第一季:17redis在项目中使用场景【Java面试题】
第一季:17redis在项目中使用场景【Java面试题】
205 0
maven 项目依赖自动导入失败(pom.xml 文件爆红),解决--手动导入
maven 项目依赖自动导入失败(pom.xml 文件爆红),解决--手动导入
645 0
FBX转换GLB格式
FBX是一种通用的3D模型交换格式,适用于各种3D应用领域,具备丰富的功能和兼容性。GLB是GLTF的二进制版本,提供了更高效的加载和传输体验。选择使用哪种格式取决于具体的应用需求和平台支持。
482 0
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问