开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第9天，点击查看活动详情
组件computed()的标注类型
computed()的标注类型的也是可以通过自动计算其的返回值来推导出类型的。
import { ref, computed } from 'vue'
const num = ref(0)
// 推导得到的类型：ComputedRef<number>
const count = computed(() => num.value * 2)
// => TS Error: Property 'split' does not exist on type 'number'
const result = count.value.split('')
当然我们你可以通过泛型参数的形式来指定类型：
const double = computed<number>(() => {
// 当函数的返回值不是 number 类型则会报错
})
事件处理函数的标注类型
像我们开发中遇到的各种change、click以及input等等事件，我们也应该给其参数标注正确的类型。以input事件为例：
<script setup lang="ts">
const handleInput = (event) => {
// 当我们没有给参数标注类型时，他会给你个提示
// TS7044: Parameter 'event' implicitly has an 'any' type, but a better type may be inferred from usage.
// 意思是，他会隐式的给你标注any类型
console.log(event.target.value)
}
</script>
<template>
<input type="text" @input="handleInput" />
</template>
当你在tsconfig.json的文件中配置"strict": true 或 "noImplicitAny": true属性时，他就会提示上述的错误。
所以说，我们可以显示地为其标注参数类型。
const handleInput = (event: Event) => {
console.log((event.target as HTMLInputElement).value);
}
还有一点需要注意是地，当你需要使用event地属性时，需要给其进行相应地强制转换。就像上面代码中地as HTMLInputElement 一样。
provide 和 inject 的标注类型
provide 和 inject 的标注类型会稍显麻烦一点，因为其涉及到在不同的组件中运行，所以我们就需要通过vue提供的InjectionKey 接口，来进行标注了，它继承自Symbol的泛型类型，也为我们通过Symbol()作为注入名提供了便利。
import { provide, inject } from 'vue'
import type { InjectionKey } from 'vue'
// 使用Symbol()作为注入名，可以很好的避免命名冲突
// 当然更建议把注入名放到一个单独额文件中，可以进行很好的复用
const key = Symbol() as InjectionKey<string>
provide(key, 'title') // 若提供的是非字符串值会导致错误
使用注入值的时候时，因为其的类型是unknown，所以需要泛型参数来显示声明：
// 因为无法保证注入值是否存在，所以类型为string | undefined的联合类型
const title = inject<string>('title')
当然，如果确定该值始终被注入的时候，也可以进行强制转换：
const title = inject('title') as string
