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
2
分享
相关文章
【错误记录】Google Play 上架报错 ( 此版本不符合 Google Play 关于提供 64 位版本应用的要求。| 如果提供 x86 架构动态库则必须提供 x86_64 架构的动态库 )
【错误记录】Google Play 上架报错 ( 此版本不符合 Google Play 关于提供 64 位版本应用的要求。| 如果提供 x86 架构动态库则必须提供 x86_64 架构的动态库 )
406 0
【错误记录】Google Play 上架报错 ( 此版本不符合 Google Play 关于提供 64 位版本应用的要求。| 如果提供 x86 架构动态库则必须提供 x86_64 架构的动态库 )
探秘Oracle表空间、用户、表之间的关系
 之前的DRP项目虽然用到了oracle,但是所有数据库对象的建立都是按文档来的,并没有仔细思考总结,后面再次用到oracle时,不能再那么糊里糊涂的用了,得稍微探索一下下了,究竟这些oracle中的数据库对象之间都存在什么关系呢?
探秘Oracle表空间、用户、表之间的关系
API工具--Apifox和Postman对比(区别)
Postman和Apifox有什么区别?他们之间分别有什么优势,感兴趣的同学可以继续往下看。 不吹不黑,只列功能,纯客观比对。
API工具--Apifox和Postman对比(区别)
ElasticSearch 的概念解析与使用方式(二)
ElasticSearch 的概念解析与使用方式(二)
132 1
LangChain 构建问题之MetaGPT 和 ChatDev 的支持功能差异如何解决
LangChain 构建问题之MetaGPT 和 ChatDev 的支持功能差异如何解决
231 0
【Java】Java与C++:比较与对比
【Java】Java与C++:比较与对比
290 0
怎样利用DevOps文化提高软件开发的效率和质量
DevOps文化的兴起为软件开发带来了新的思维和方法,通过自动化、持续交付、协作等实践,提高了软件开发的效率和质量。在不断变化的技术环境下,利用DevOps的理念和实践,软件开发团队能够更加灵活、高效地应对挑战,将创新快速落地。同时,随着新概念的涌现,我们也看到了DevSecOps和AIOps等的前景,为软件开发领域带来更多的可能性。
490 1
怎样利用DevOps文化提高软件开发的效率和质量
[Halcon&识别] 二维码识别
[Halcon&识别] 二维码识别
609 0
快看!那朵云上有个“新四川”
3月初,在成都召开的四川省数据赋能城市治理和产业升级峰会暨2023阿里云城市峰会上,包括智慧蓉城“城市运行云”、内江“甜城大脑”、达州城市大脑、蜀道集团“成宜数字高速”等四川省数字化创新标杆首次集体对外公开,全面展现了四川省在数字化创新方面所取得的成果。
快看!那朵云上有个“新四川”
瑞萨RA6M4开发板在RT-Thread中使用segger_rtt软件包
瑞萨RA6M4开发板在RT-Thread中使用segger_rtt软件包
204 0
AI助理

你好,我是AI助理

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